From 68cbb649c933776838e937446ce9ed384916a5e8 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 14 八月 2019 14:20:59 +0800
Subject: [PATCH] 2019-08-14update
---
src/views/successCase/index.vue | 173 ++---
src/views/home/index.vue | 2
package-lock.json | 5
src/views/productCenter/index.vue | 320 ++++++----
src/main.js | 6
package.json | 1
src/components/header.vue | 246 +++----
src/views/successCase/caseDetail.vue | 696 ++++++++++++----------
src/store/service.js | 82 ++
src/views/companyProfile/index.vue | 34
src/views/index/index.vue | 261 ++++++--
src/router/index.js | 10
12 files changed, 1,045 insertions(+), 791 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 61f7cdb..0754782 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3308,6 +3308,11 @@
"assert-plus": "1.0.0"
}
},
+ "dat.gui": {
+ "version": "0.7.6",
+ "resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.6.tgz",
+ "integrity": "sha512-9Uqr4aQUvp9q5P2b4y6gK604HXafubOq578OmOS8mjrIkYrBP4EbQ9gz9YRXgyPh7aQi+b9H/jAG7EucmhYpSA=="
+ },
"data-uri-to-buffer": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-2.0.1.tgz",
diff --git a/package.json b/package.json
index 5439e34..c875ba0 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
},
"dependencies": {
"axios": "^0.18.1",
+ "dat.gui": "^0.7.6",
"element-ui": "^2.10.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
diff --git a/src/components/header.vue b/src/components/header.vue
index f98d6fb..5c6e71d 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -3,77 +3,71 @@
<div class="wrapper">
<a class="logo"><img src="../img/index_logo.png" alt=""></a>
<div class="nav" @mouseleave="leave()">
- <router-link tag="span" class="homeico m_hide" to="/"><img src="../img/homeico.png" alt=""></router-link>
- <span class="homeico p_hide" @click="jump('/')"><img src="../img/homeico.png" alt=""></span>
+ <!-- 绉诲姩绔痟eader鍥炬爣 -->
+ <span class="homeico p_hide" @click="jump('Index')"><img src="../img/homeico.png" alt=""></span>
<span class="navico" v-if="!isShow" @click="showNav"><img src="../img/navico.png" alt=""></span>
<span class="navico" v-else @click="showNav"><img src="../img/close.png" alt=""></span>
+ <!-- pc绔彍鍗曞垪琛� -->
<ul class="nav_ul" ref="nav_ul">
- <router-link tag="li" v-for="(menu, index) in menus" :key="index" :to="menu.url" :class="{active1: cur === index}">
- <span @mouseover="add(index)">{{ menu.text }}</span>
- </router-link>
- <!-- <div class="list1 list3" :class="{active:this.menus[1].flag === true}" @click="menus[1].flag = false" v-if="menus[1].flag"></div> -->
- <div :class="{active:this.menus[1].flag==true}" class="list1" @click="adda(1)" v-if="menus[1].flag">
+ <li v-for="(menu, index) in menus" :key="index" :class="{active1: cur === index}" @click="jump(menu.url)">
+ <span @mouseover="contrlSubmenu(index)">{{ menu.text }}</span>
+ </li>
+ <div class="list1 active" v-if="menus[1].flag">
<ul class="abloutMingKe_ul">
- <router-link @click="add1($event,index)" tag="li" v-for="(secondMenus,index) in secondMenus" :key="index" :to="secondMenus.url">{{secondMenus.text}}</router-link>
+ <li @click="jump(product.url, product.Id, 'submenu')" v-for="(product, index) in products" :key="index">{{product.text}}</li>
</ul>
<ul class="abloutMingKe_ul1">
- <router-link tag="li" v-for="(secondMenus,index) in secondMenus1" :key="index" :to="secondMenus.url">{{secondMenus.text}}</router-link>
+ <li @click="jump(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions" :key="index">{{solution.text}}</li>
</ul>
</div>
- <!-- <div class="list1 list33" :class="{active:this.menus[1].flag==true}" @click="menus[1].flag = false" v-if="menus[1].flag"></div> -->
- <!-- <div :class="{active:this.menus[5].flag==true}" class="list1 list33" @click="menus[5].flag = false" v-if="menus[5].flag"></div> -->
- <div :class="{active:this.menus[5].flag==true}" class="list2" @click="adda(5)" v-if="menus[5].flag">
+ <div class="list2 active" v-if="menus[5].flag">
<ul class="abloutMingKe_ul2">
- <li v-for="(secondMenus,index) in secondMenus2" @click="add5(secondMenus.url,index+1)" :key="index">{{secondMenus.text}}</li>
+ <li v-for="(submenu, index) in minkesoft" @click="jump(submenu.url, index, 'aboutUs')" :key="index">{{submenu.text}}</li>
</ul>
</div>
- <!-- <div :class="{active:this.menus[5].flag==true}" class="list2 list5" @click="menus[5].flag = false" v-if="menus[5].flag"></div> -->
</ul>
</div>
</div>
- <div :class="!isShow ? 'nav_ul' : 'plane'" style="height: 100%;background-color: #282830;display: none;margin-top:0.3rem">
+ <div :class="!isShow ? 'nav_ul' : 'plane'" class="hidden">
<el-collapse accordion>
<el-collapse-item>
<template slot="title">
<span class="title_s">浜у搧涓績</span>
</template>
- <div class="menu3" @click="jump('center')" style="color: #fff;">浜у搧涓績</div>
- <div class="menu3" @click="jump('productCenter')">MingKeOS</div>
- <div class="menu3" @click="jump('productCenter')">鏅烘収浠撳偍</div>
- <div class="menu3 more" @click="jump('center')">鏇村 <img src="../img/more.png" alt=""></div>
- <div style="clear: both;"></div>
- <div class="menu3" @click="jump('caseSolution')" style="color: #fff;">瑙ｅ喅鏂规</div>
- <div class="menu3" @click="jump('caseDetail')">鐢靛姩宸ュ叿琛屼笟瑙ｅ喅鏂规</div>
- <div class="menu3" @click="jump('caseDetail')">绯荤粺闆嗘垚琛屼笟瑙ｅ喅鏂规</div>
- <div class="menu3" @click="jump('caseDetail')">鐢靛瓙鍟嗗姟琛屼笟瑙ｅ喅鏂规</div>
- <div class="menu3" @click="jump('caseDetail')">鍒惰嵂琛屼笟瑙ｅ喅鏂规</div>
- <div class="menu3 more" @click="jump('caseSolution')">鏇村 <img src="../img/more.png" alt=""></div>
+ <div>
+ <div class="menu3" :class="{'more active': index === products.length - 1, 'active': selectedsubId === product.Id}"
+ @click="jump(product.url, product.Id, 'submenu')" v-for="(product, index) in products" :key="index">{{product.text}}</div>
+ <div style="clear: both;"></div>
+ </div>
+
+ <div class="menu3" :class="{'more active': index === solutions.length - 1, 'active': selectedsubId === solution.Id}"
+ @click="jump(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions" :key="index">{{solution.text}}</div>
<div style="clear: both;"></div>
</el-collapse-item>
<el-collapse-item class="el_coll">
<template slot="title">
- <span @click="jump('successCase')" class="title_s">鎴愬姛妗堜緥</span>
+ <span @click="jump('SuccessCase')" class="title_s">鎴愬姛妗堜緥</span>
</template>
</el-collapse-item>
<el-collapse-item class="el_coll">
<template slot="title">
- <span @click="jump('partner')" class="title_s">娓犻亾鍚堜綔</span>
+ <span @click="jump('Partner')" class="title_s">娓犻亾鍚堜綔</span>
</template>
</el-collapse-item>
<el-collapse-item class="el_coll">
<template slot="title">
- <span @click="jump('news')" class="title_s">鏂伴椈璧勮</span>
+ <span @click="jump('News')" class="title_s">鏂伴椈璧勮</span>
</template>
</el-collapse-item>
<el-collapse-item>
<template slot="title">
- <span @click="jump('companyProfile')" class="title_s">鍏充簬鏄庣</span>
+ <span @click="jump('CompanyProfile')" class="title_s">鍏充簬鏄庣</span>
</template>
- <div class="menu2" @click="jump('companyProfile#anchor-1')">浼佷笟鏂囧寲</div>
- <div class="menu2" @click="jump('companyProfile#anchor-2')">鑽ｈ獕璧勮川</div>
- <div class="menu2" @click="jump('companyProfile#anchor-3')">鑱旂郴鏄庣</div>
- <div class="menu2" @click="jump('joinMingKe')">鍔犲叆鏄庣</div>
+ <div class="menu2" @click="jump('CompanyProfile', 0, 'aboutUs')">浼佷笟鏂囧寲</div>
+ <div class="menu2" @click="jump('CompanyProfile', 1, 'aboutUs')">鑽ｈ獕璧勮川</div>
+ <div class="menu2" @click="jump('CompanyProfile', 2, 'aboutUs')">鑱旂郴鏄庣</div>
+ <div class="menu2" @click="jump('JoinMingKe')">鍔犲叆鏄庣</div>
</el-collapse-item>
</el-collapse>
</div>
@@ -88,10 +82,10 @@
activeNames: ['1'],
cur: 0,
isShow: false,
- isShowChild: false,
+ selectedsubId: null,
menus: [{
text: '棣栭〉',
- url: '/',
+ url: 'Index',
},
{
text: '浜у搧涓績',
@@ -100,139 +94,115 @@
},
{
text: '鎴愬姛妗堜緥',
- url: '/successCase',
+ url: 'SuccessCase',
},
{
text: '娓犻亾鍚堜綔',
- url: '/partner'
+ url: 'Partner'
},
{
text: '鏂伴椈璧勮',
- url: '/news'
+ url: 'News'
},
{
text: '鍏充簬鏄庣',
- url: '/companyProfile',
+ url: 'CompanyProfile',
flag: false,
}
],
- secondMenus: [{
- text: '浜у搧涓績',
- url: 'center'
- },
- {
- text: 'MingKeOS',
- url: 'productCenter'
- },
- {
- text: '鏅烘収浠撳偍',
- url: 'productCenter'
- },
- {
- text: '璐ㄩ噺杩芥函',
- url: 'productCenter'
- },
- {
- text: '鏇村 銆�',
- url: '/center'
- },
- ],
- secondMenus1: [{
- text: '瑙ｅ喅鏂规',
- url: '/caseSolution'
- },
- {
- text: '鐢靛姩宸ュ叿琛屼笟瑙ｅ喅鏂规',
- url: '/caseDetail'
- },
- {
- text: '绯荤粺闆嗘垚琛屼笟瑙ｅ喅鏂规',
- url: '/caseDetail'
- },
- {
- text: '鐢靛瓙鍟嗗姟琛屼笟瑙ｅ喅鏂规',
- url: '/caseDetail'
- },
- {
- text: '鍒惰嵂琛屼笟瑙ｅ喅鏂规',
- url: '/caseDetail'
- },
- {
- text: '鏇村 銆�',
- url: '/caseSolution'
- }
- ],
- secondMenus2: [{
+ products: null,
+ solutions: null,
+ minkesoft: [{
text: '浼佷笟鏂囧寲',
- url: '/companyProfile'
+ url: 'CompanyProfile'
},
{
text: '鑽ｈ獕璧勮川',
- url: '/companyProfile'
+ url: 'CompanyProfile'
},
{
text: '鑱旂郴鏄庣',
- url: '/companyProfile'
+ url: 'CompanyProfile'
},
{
text: '鍔犲叆鏄庣',
- url: '/joinMingKe'
- },
+ url: 'JoinMingKe'
+ }
]
}
},
methods: {
- goHere (path) {
- this.$router.push({
- path: path
- });
+ jump (name, index, type) {
+ if (!name) return
+ this.selectedsubId = null
+ this.isShow = false
+ if (!type) { // 涓婚〉闈㈣烦杞�
+ if (name === 'CompanyProfile') { // 鍏充簬鏄庣,閿氱偣鍙傛暟
+ this.$router.push({name: name, params: {hash: 'null'}})
+ } else {
+ this.$router.push({name: name})
+ }
+ } else if (type === 'submenu') { // 浜у搧涓績瀛愰〉闈㈣烦杞�
+ this.menus[1].flag = false
+ this.menus[5].flag = false
+ this.selectedsubId = index
+ this.$router.push({name: name, params: {menuId: index}})
+ } else if (type === 'aboutUs') { // 鍏充簬鏄庣瀛愰〉闈㈣烦杞�
+ if (index === 3) { // 鍔犲叆鏄庣
+ this.$router.push({name: name})
+ } else {
+ this.$router.push({name: 'CompanyProfile', params: {hash: `#anchor-${index + 1}`}})
+ }
+ }
},
showNav () {
- this.isShow = !this.isShow;
+ this.isShow = !this.isShow
this.$refs.nav_ul.style.left = this.isShow ? (0 + 'px') : (-1000 + 'px')
},
- add (index) {
+ contrlSubmenu (index) {
this.cur = index
if (index == 1) {
- this.menus[index].flag = !this.menus[index].flag;
- this.menus[5].flag = false;
+ this.menus[index].flag = !this.menus[index].flag
+ this.menus[5].flag = false
} else if (index == 5) {
- this.menus[index].flag = !this.menus[index].flag;
- this.menus[1].flag = false;
+ this.menus[index].flag = !this.menus[index].flag
+ this.menus[1].flag = false
} else {
- this.menus[1].flag = false;
- this.menus[5].flag = false;
+ this.menus[1].flag = false
+ this.menus[5].flag = false
}
},
leave () {
- this.menus[1].flag = false;
- this.menus[5].flag = false;
- },
- add5 (u,i) {
- if(i != 4){
- this.$router.push(`${u}#anchor-${i}`)
- }else{
- this.$router.push(u)
- }
- },
- adda (index) {
- if (index == 1 || index == 5) {
- this.menus[index].flag = false;
- }
- },
- add1 (e, index) {
- console.log(index)
- },
- //绉诲姩绔烦杞�
- jump (u) {
- this.isShow = false
- this.$router.push(u)
+ this.menus[1].flag = false
+ this.menus[5].flag = false
},
load () {
- this.$axios({
- data: {
- func: 'Web_Index_GetData'
- }
+ this.Service.getBaseData('Web_Index_GetData').then(res => {
+ this.products = res.Product.map(pro => {
+ return {
+ Id: pro.ID,
+ text: pro.Title1,
+ url: pro.PageType
+ }
+ })
+ this.products.push({
+ Id: this.products[0].Id,
+ text: '鏇村 >>',
+ url: this.products[0].url
+ })
+
+ this.solutions = res.Solution.map(pro => {
+ return {
+ Id: pro.ID,
+ text: pro.Title1,
+ url: pro.PageType
+ }
+ })
+ this.solutions.push({
+ Id: this.solutions[0].Id,
+ text: '鏇村 >>',
+ url: this.solutions[0].url
+ })
})
}
},
@@ -315,6 +285,10 @@
display: none;
}
+ .hidden {
+ display: none;
+ }
+
li {
float: left;
line-height: 0.68rem;
@@ -368,7 +342,7 @@
border-right: 1px solid #999999;
li:last-child {
- margin-top: .3rem;
+ // margin-top: .3rem;
text-align: right;
}
}
@@ -410,7 +384,11 @@
}
.plane {
- display: block !important;
+ display: block;
+ height: 100%;
+ background-color: #282830;
+ padding: 0.3rem 0 1rem;
+ overflow-y: scroll;
}
.nav_ul {
@@ -523,7 +501,9 @@
margin-left: 0.2rem;
}
}
-
+ .menu3.active {
+ color: #ffffff;
+ }
.more {
float: right;
padding-right: 0.5rem;
diff --git a/src/main.js b/src/main.js
index 0d2582d..6fc7ac5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,7 @@
import App from '@/App'
import router from '@/router'
import Vuex from 'vuex'
-import axios from '@/config/axios_init'
+// import axios from '@/config/axios_init'
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from '@/store'
@@ -12,6 +12,7 @@
import '@/css/el_reset.css'
import '@/css/fonts.css'
import '@/js/main.js'
+import Service from '@/store/service.js'
import Header from "@/components/header.vue";
Vue.component(Header.name, Header); // 澶撮儴缁勪欢
@@ -23,7 +24,8 @@
Vue.config.productionTip = false
Vue.config.devtools = true
-Vue.prototype.$axios = axios
+// Vue.prototype.$axios = axios
+Vue.prototype.Service = new Service()
Vue.use(ElementUi);
Vue.use(Vuex);
diff --git a/src/router/index.js b/src/router/index.js
index 6a2653e..3ebbf2a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,7 +45,7 @@
},
{
name: 'ProductCenter',
- path: '/productCenter',//浜у搧杞欢
+ path: '/productCenter/:menuId',//浜у搧杞欢
component: ProductCenter
},
{
@@ -53,13 +53,13 @@
path: '/successCase',//鎴愬姛妗堜緥
component: SuccessCase,
},{
- name: 'SuccessCaseIndex',
- path: '/SuccessCaseIndex',//鎴愬姛妗堜緥 璇︽儏
+ name: 'successCaseIndex',
+ path: '/SuccessCaseIndex/:menuId',//鎴愬姛妗堜緥 璇︽儏
component: SuccessCaseIndex,
},
{
name: 'CaseDetail',
- path: '/caseDetail',//瑙ｅ喅鏂规 璇︽儏
+ path: '/caseDetail/:menuId',//瑙ｅ喅鏂规 璇︽儏
component: CaseDetail
},
{
@@ -84,7 +84,7 @@
},
{
name: 'CompanyProfile',
- path: '/companyProfile',//浼佷笟鏂囧寲
+ path: '/companyProfile/:hash',//浼佷笟鏂囧寲
component: CompanyProfile
},
{
diff --git a/src/store/service.js b/src/store/service.js
new file mode 100644
index 0000000..371f12d
--- /dev/null
+++ b/src/store/service.js
@@ -0,0 +1,82 @@
+import axios from 'axios'
+
+axios.defaults.baseURL = '/minkesoft/webapi/dostar'
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
+axios.defaults.crossDomain = true
+axios.defaults.withCredentials = true
+
+axios.interceptors.request.use((config) => {
+ // 鍦ㄥ彂閫佽姹備箣鍓嶅仛浜涗粈涔�
+ config.data == undefined ? config.data = {} : false
+ config.method = 'post'
+ config.data.userid = ''
+ config.data = JSON.stringify(config.data)
+ return config
+}, (error) => {
+ // 瀵硅姹傞敊璇仛浜涗粈涔�
+ return Promise.reject(error)
+});
+
+axios.interceptors.response.use((response) => {
+ // 瀵瑰搷搴旀暟鎹仛鐐逛粈涔�
+ // response.data = JSON.parse(response.data)
+ return Promise.resolve(response.data)
+}, (error) => {
+ // 瀵瑰搷搴旈敊璇仛鐐逛粈涔�
+ return Promise.resolve(error)
+});
+
+export default class Service {
+ constructor () {
+
+ }
+
+ /**
+ * @description 鑾峰彇瀹樼綉鍩虹鏁版嵁锛屽苟缂撳瓨鑷硈ession
+ * @param {String} DBS 瀛樺偍杩囩▼
+ */
+ getBaseData (DBS) {
+ // let cachedata = sessionStorage.getItem(DBS)
+ let cachedata = ''
+ if (cachedata) {
+ return Promise.resolve(JSON.parse(cachedata))
+ } else {
+ return new Promise(resolve => {
+ axios({
+ data: {
+ func: DBS
+ }
+ }).then(res => {
+ if (res.status) {
+ sessionStorage.setItem(DBS, JSON.stringify(res))
+ }
+ resolve(res)
+ })
+ })
+ }
+ }
+
+ /**
+ * @description 鑾峰彇瀹樼綉鍩虹鏁版嵁锛屽苟缂撳瓨鑷硈ession
+ * @param {String} param 璇锋眰鍙傛暟
+ */
+ getParamData (param) {
+ let _param = JSON.stringify(param)
+ // let cachedata = sessionStorage.getItem(_param)
+ let cachedata = ''
+ if (cachedata) {
+ return Promise.resolve(JSON.parse(cachedata))
+ } else {
+ return new Promise(resolve => {
+ axios({
+ data: param
+ }).then(res => {
+ if (res.status) {
+ sessionStorage.setItem(_param, JSON.stringify(res))
+ }
+ resolve(res)
+ })
+ })
+ }
+ }
+}
diff --git a/src/views/companyProfile/index.vue b/src/views/companyProfile/index.vue
index 796f59f..51d040d 100644
--- a/src/views/companyProfile/index.vue
+++ b/src/views/companyProfile/index.vue
@@ -256,15 +256,18 @@
export default {
data() {
return {
- img_index:0,
- anchor:false,
+ img_index: 0,
+ anchor: false
}
},
- mounted () {
- let url = location.href
- let hash = url.substring(url.length-9)
- this.get_anchor(hash)
- },
+ watch: { //鐩戝惉璺敱
+ $route (to, from) {
+ if (to.params.hash && to.params.hash !== 'null') {
+ this.anchor = true
+ this.get_anchor(to.params.hash)
+ }
+ }
+ },
methods: {
//鏍规嵁hash鍊艰烦杞笉鍚岄敋鐐�
get_anchor (hash) {
@@ -273,18 +276,13 @@
}
}
},
- destroyed () { //杩斿洖椤堕儴
- document.body.scrollTop = 0
- document.documentElement.scrollTop = 0
- },
- watch: { //鐩戝惉璺敱
- $route (to,from) {
- if (to.hash) {
- this.anchor = true
- this.get_anchor(to.hash)
- }
+ mounted () {
+ let hash = this.$route.params.hash
+ if (hash && hash !== 'null') {
+ this.anchor = true
+ this.get_anchor(hash)
}
- }
+ }
}
</script>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 4067efe..32426b9 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -80,7 +80,7 @@
width: 0.6rem;
height: 0.6rem;
bottom: 2.2rem;
- z-index: 9999;
+ z-index: 100;
.img {
width: 0.6rem;
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 9e94bcd..650fa91 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,6 +1,7 @@
<template>
<div class="main">
- <div class="banner"><img src='../../img/home.jpg' alt=""></div>
+ <canvas id="canvas" style="position: absolute;z-index: 1;top: 0px;"></canvas>
+ <div class="banner"><img id="homeId" src='../../img/home.jpg' alt=""></div>
<div class="wrapper-box">
<h3 class="content_title fadeInUp zoomIn animated"><span>涓昏惀涓氬姟</span></h3>
<div class="m_zhu" v-for="(business, index) in mainBusiness" :key="index">
@@ -30,7 +31,7 @@
<div class="wrapper">
<ul class="business_ul">
<router-link tag="li" to="/caseDetail" v-for="(business, index) in mainBusiness" :key="index" class="fadeInUp" v-drag>
- <router-link tag="div" class="business_box animated pulse" :key="index" to="/caseDetail">
+ <router-link tag="div" class="business_box pulse" :key="index" to="/caseDetail">
<div class="business_box_t" :style="'background-image: url(' + business.Image1 + ')'">
<div class="bgopacity"></div>
<h2 v-text="business.Title2"></h2>
@@ -56,7 +57,7 @@
<el-button>鏌ョ湅鏇村</el-button>
</div>
<div class="particulars">
- <a href="/caseDetail" style="color: #14A9E5;">浜嗚В璇︽儏 >></a>
+ <a href="/caseDetail">浜嗚В璇︽儏 >></a>
</div>
</router-link>
<div class="business">
@@ -175,67 +176,149 @@
</div>
</template>
<script>
- export default {
- data() {
- return {
- brothers: '',
- data: [],
- img_index: 0,
- mainBusiness: null,
- cases: null,
- news: null
- }
+// import * as dat from 'dat.gui'
+
+export default {
+ data() {
+ return {
+ brothers: '',
+ data: [],
+ img_index: 0,
+ mainBusiness: null,
+ cases: null,
+ news: null
+ }
+ },
+ methods:{
+ jump (u) {
+ this.$router.push(u)
},
- methods:{
- jump (u) {
- this.$router.push(u)
- },
- load () {
- this.$axios({
- data: {
- func: 'Web_Index_GetData'
- }
- }).then(res => {
- this.mainBusiness = res.Main
- this.cases = res.Case
- this.news = res.News
- })
- this.$axios({
- data: {
- func: 'Web_productCenter_GetData',
- ID: '20190726105746487D81C9D31A08C4C55A81C'
- }
- }).then(res => {
- console.log(res)
- })
- }
+ load () {
+ this.Service.getBaseData('Web_Index_GetData').then(res => {
+ this.mainBusiness = res.Main
+ this.cases = res.Case
+ this.news = res.News
+ })
},
- directives: {
- drag: function(el) {
- //鑾峰彇褰撳墠鍏冪礌
- let dragBox = el;
- dragBox.onmousemove = e => {
- let brothers = e.currentTarget.firstElementChild;
- let box = dragBox.childNodes[2];
- box.style.opacity = 0;
- brothers.style.display = 'block';
- brothers.style.opacity = '0.95';
- brothers.style.zIndex = '999'
- };
- dragBox.onmouseout = e => {
- let brothers = e.currentTarget.firstElementChild;
- let box = dragBox.childNodes[2];
- box.style.opacity = 1;
- box.style.display = 'block'
- brothers.style.opacity = '0.95';
- brothers.style.display = 'none';
+ setgui (radio) {
+ let canvas = document.getElementById('canvas')
+ let ctx = canvas.getContext('2d')
+ let w = ctx.canvas.width = window.innerWidth
+ let h = ctx.canvas.height = window.innerWidth / radio + 80
+ let dots = []
+ let cx = -200 // 缁樺浘涓偣x
+ let cy = -200 // 缁樺浘涓偣y
+ let emitter = null // 瀹氭椂鍣�
+ let maxDots = 500 // 鏈�澶х粯鍥剧偣
+ let maxSpeed = 3
+ let minSpeed = 1
+ let emitRate = 10
+ let emitNum = 2
+ let radius = 2
+ let trail = 0.2
+ let maxTime = 3000
+ let minTime = 1000
+ let glow = 0
+
+ let emitDots = (x, y) => {
+ if (dots.length < maxDots) {
+ for (let i = 0; i < emitNum; i++) {
+ let color = Math.floor(Math.random() * 255)
+ dots.push({
+ x: cx,
+ y: cy,
+ v: Math.random() * (maxSpeed - minSpeed) + minSpeed,
+ d: Math.random() * 360,
+ c: Math.random() * (5 - (-5)) + (-5),
+ h: color,
+ st: Date.now(),
+ lt: Math.random() * (maxTime - minTime) + minTime
+ })
+ }
}
}
- },
- mounted () {
- this.load()
+
+ let draw = () => {
+ ctx.clearRect(0, 0, w, h)
+ // ctx.fillStyle = 'rgba(0,0,0,' + trail + ')'
+ ctx.fillStyle = 'rgba(255, 255, 255, 0)'
+ ctx.fillRect(0, 0, w, h)
+ ctx.fill()
+ for (let i = 0; i < dots.length; i++) {
+ let pct = (Date.now() - dots[i].st) / dots[i].lt
+
+ ctx.save()
+ ctx.beginPath()
+ ctx.fillStyle = 'hsla(' + dots[i].h + ', 100%, 50%, ' + (1-pct) + ')'
+ ctx.shadowColor = 'hsla(' + dots[i].h + ', 100%, 50%, 1)'
+ ctx.shadowBlur = glow
+ ctx.arc(dots[i].x, dots[i].y, Math.pow(radius, 2) / dots[i].v, 0, Math.PI * 2)
+ ctx.fill()
+ ctx.closePath()
+ ctx.restore()
+
+ dots[i].x += dots[i].v * Math.cos(dots[i].d * Math.PI/180)
+ dots[i].y += dots[i].v * Math.sin(dots[i].d * Math.PI/180)
+ dots[i].d += dots[i].c
+
+ if (dots[i].x > w || dots[i].x < 0 || dots[i].y > h || dots[i].y < 0 || dots[i].st + dots[i].lt < Date.now()) {
+ dots.splice(i, 1)
+ }
+ }
+ requestAnimationFrame(draw) //
+ }
+
+ emitter = setInterval(emitDots, emitRate)
+ draw()
+
+ canvas.onmousemove = (e) => {
+ let offset = document.documentElement.scrollTop || document.body.scrollTop
+ cx = e.clientX
+ cy = e.clientY + offset
+ }
+ canvas.onmouseleave = () => {
+ cx = -200
+ cy = -200
+ }
+ window.onresize = () => {
+ w = ctx.canvas.width = window.innerWidth
+ h = ctx.canvas.height = window.innerWidth / radio + 80
+ }
+ }
+ },
+ directives: {
+ drag: function(el) {
+ //鑾峰彇褰撳墠鍏冪礌
+ let dragBox = el;
+ dragBox.onmousemove = e => {
+ let brothers = e.currentTarget.firstElementChild;
+ let box = dragBox.childNodes[2];
+ box.style.opacity = 0;
+ brothers.style.display = 'block';
+ brothers.style.opacity = '0.95';
+ brothers.style.zIndex = '999'
+ };
+ dragBox.onmouseout = e => {
+ let brothers = e.currentTarget.firstElementChild;
+ let box = dragBox.childNodes[2];
+ box.style.opacity = 1;
+ box.style.display = 'block'
+ brothers.style.opacity = '0.95';
+ brothers.style.display = 'none';
+ }
+ }
+ },
+ mounted () {
+ this.load()
+ let width = window.innerWidth
+ if (width > 750) {
+ setTimeout(() => {
+ let radio = document.getElementById('homeId').width / document.getElementById('homeId').height
+ this.setgui(radio)
+ }, 2000)
}
}
+}
</script>
<style scoped lang="less">
.pc_case {
@@ -273,6 +356,7 @@
}
}
.dynamic_ul li {
+ position: relative;
h2 {
padding: 0 .11rem;
@@ -318,6 +402,9 @@
}
@media (max-width: 750px) and (min-width: 0) {
+ #canvas {
+ display: none;
+ }
.mob_case {
background: #ffffff;
position: relative;
@@ -432,6 +519,7 @@
}
.see-detail {
+ cursor: pointer;
font-size: 0.24rem;
font-family: PingFang-SC-Medium;
font-weight: 500;
@@ -664,25 +752,30 @@
height: 3rem;
margin: 0.69rem 0 .85rem;
}
- .business_ul > li:hover {
- z-index: 1000;
- }
+
.business_ul > li {
display: inline-block;
text-align: center;
- background: rgba(255, 255, 255, 1);
+ background: transparent;
flex: 1;
height: 4rem;
padding-bottom: 0.1rem;
box-sizing: border-box;
position: relative;
- -webkit-transition: transform 1s, opacity 1s;
- -moz-transition: transform 1s, opacity 1s;
- -o-transition: transform 1s, opacity 1s;
- transition: transform 1s, opacity 1s;
+ // -webkit-transition: transform 1s, opacity 1s;
+ // -moz-transition: transform 1s, opacity 1s;
+ // -o-transition: transform 1s, opacity 1s;
+ // transition: transform 1s, opacity 1s;
+ transition: all 0.3s;
+ .pulse {
+ width: 85%;
+ margin: 0 auto;
+ opacity: 0;
+ }
.business {
position: absolute;
+ opacity: 1;
top: .1rem;
left: .3rem;
width: 85%;
@@ -717,7 +810,17 @@
margin-top: 0.04rem;
}
}
-
+ .business_ul > li:hover {
+ transform: scale(1.1);
+ z-index: 1000;
+ .business {
+ z-index: -1;
+ opacity: 0;
+ }
+ .pulse {
+ opacity: 1;
+ }
+ }
.business_box {
display: none;
width: 100%;
@@ -770,10 +873,10 @@
height: 0.55rem;
h3 {
- img {
- width: .2rem;
- height: .2rem;
- margin-bottom: 0.13rem;
+ margin-bottom: 0.07rem;
+ .fa {
+ font-size: 0.20rem;
+ color: #1CACE6;
}
}
@@ -781,6 +884,9 @@
font-size: 0.12rem;
color: #838383;
}
+ // div > p:last-child {
+ // font-size: 0.12rem;
+ // }
}
}
}
@@ -833,6 +939,11 @@
padding: 0 .2rem;
text-align: right;
color: #14A9E5;
+ a {
+ display: inline-block;
+ color: #14A9E5;
+ cursor: pointer;
+ }
}
.content_subtitle {
@@ -896,7 +1007,8 @@
}
.dynamic_ul_card {
- background: rgba(243, 243, 243, 1);
+ // background: rgba(243, 243, 243, 1);
+ background: rgba(0, 0, 0, 0.02);
height: 2.56rem;
h2 {
@@ -913,7 +1025,10 @@
.wrapper:last-child .content_title {
margin: 1rem 0 1.21rem;
}
-
+ .platform_ul>li {
+ transition: all 0.5s;
+ position: relative;
+ }
.platform_ul>li:hover {
transform: scale(1.2);
box-shadow: 0px 0px 38px 0px rgba(79, 78, 80, 0.15);
diff --git a/src/views/productCenter/index.vue b/src/views/productCenter/index.vue
index b90593c..fee86c0 100644
--- a/src/views/productCenter/index.vue
+++ b/src/views/productCenter/index.vue
@@ -1,133 +1,54 @@
<template>
<div class="main">
- <div class="banner m_hide" style="margin-bottom: 1rem;"><img src="../../img/ban.png" alt=""></div>
- <div class="banner p_hide" style="margin-bottom: 1rem;"><img src="../../img/m_ban.png" alt=""></div>
- <div class="wrapper platform">
- <div class="content_title"><span>鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�</span></div>
- <p>鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�(MingKe Business聽Intelligen OS锛岀畝绉帮細MingKeOS)鏄敱鏄庣浜戣绠椾簨涓氶儴鐮斿彂鐨勫彲閰嶇疆浜哄伐鏅鸿兘寮�鍙戝钩鍙帮紝浣跨敤MingKeOS鍙互璁╃敤鎴烽�氳繃绠�鍗曢厤缃�佽嚜鐒惰瑷�瀵硅瘽鐨勪氦浜掓柟寮忥紝鍗冲彲瀹炵幇浼佷笟绠＄悊杩囩▼涓鏉傜殑涓氬姟閫昏緫澶勭悊锛屽钩鍙板唴缃噰璐�佺敓浜с�侀攢鍞�佹妧鏈�佸搧鎺с�佽拷婧�佸敭鍚庛�佷緵搴斿晢銆佺粡閿�鍟嗐�佸簱瀛樸�佽储鍔＄數鍟嗐�佹暟鎹腑蹇冦�佹帴鍙ｃ�佷汉宸ユ櫤鑳斤紙Kane锛夌瓑28澶т笟鍔￠鍩熸ā鍧楃殑鍔熻兘鎿嶄綔锛屾槑绉戜綔涓哄浗鍐呴瀹跺皢浜哄伐鏅鸿兘搴旂敤浜庝紒涓氱鐞嗛鍩熺殑浼佷笟锛屽�熷姪浜戣绠椾腑蹇冿紝Kane鍙互杩涜娣卞害瀛︿範锛屼細鎴愪负浼佷笟绠＄悊鐨勫ソ甯墜銆�</p>
- </div>
- <div class="wrapper scene">
- <div class="content_title"><span>搴旂敤鍦烘櫙</span></div>
- <div class="content_scene">
- <span class="scene scene-img"><img src="../../img/p1.png" alt=""><span class="txt">渚涘簲鍟嗗崗鍚�</span></span>
- <span class="scene scene-img"><img src="../../img/p2.png" alt=""><span class="txt txt2">WMS<br />浠撳簱绠＄悊绯荤粺</span></span>
- <span class="scene scene-img"><img src="../../img/p3.png" alt=""><span class="txt txt2">QTS<br />璐ㄩ噺杩芥函绯荤粺</span></span>
- <span class="scene scene-img"><img src="../../img/p4.png" alt=""><span class="txt">缁忛攢鍟嗙鐞�</span></span>
- <span class="scene scene-img"><img src="../../img/p5.png" alt=""><span class="txt txt2">MES<br />鏅鸿兘鍒堕��</span></span>
- <span class="scene scene-img">
- <img src="../../img/jing.png" alt="" class="m_img"><span class="txt m_img">缁忛攢鍟嗙鐞�</span>
- <img src="../../img/p6.png" alt="" class="p_img">
- <span class="txt p_img" style="color: black;bottom: 0;">缁忛攢鍟嗙鐞�</span>
- </span>
+ <div class="banner"><img :src="url" alt=""></div>
+ <div v-for="(item, index) in details" :key="index">
+ <div v-if="item.type === 'WLongText'" class="wrapper platform">
+ <div class="content_title"><span v-text="item.title"></span></div>
+ <p v-text="item.longText"></p>
</div>
- </div>
- <div class="wrapper skill">
- <div class="content_title"><span>鏍稿績鎶�鏈�</span></div>
- <div class="content_skill" >
- <div class="content_skill_item">
- <div><img src="../../img/p7.png" alt=""></div>
- <p>鍙厤缃紑鍙�</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p8.png" alt=""></div>
- <p>涓夊睆鍚堜竴</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p9.png" alt=""></div>
- <p>鎺ュ彛鎶�鏈�</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p10.png" alt=""></div>
- <p>璇█鍖�</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p11.png" alt=""></div>
- <p>IOT</p>
+ <div v-else-if="item.type === 'Wimages'" class="wrapper scene">
+ <div class="content_title"><span v-text="item.title"></span></div>
+ <div class="content_scene">
+ <span class="scene scene-img" v-for="(img, index) in item.imglist" :key="index">
+ <img :src="img.url" alt="">
+ <span class="txt" :class="'txt' + img.position" :style="'color:' + img.color">
+ <p v-text="img.title"></p>
+ <p v-text="img.tip"></p>
+ </span>
+ </span>
</div>
</div>
- </div>
- <div class="wrapper industry">
- <div class="content_title"><span>閫傜敤琛屼笟</span></div>
- <div class="content_industry">
- <div class="content_industry_card">
- <h3>瑁呭鍒堕��</h3>
- <p>涓浗姝ｅ湪鎴愪负鍏ㄧ悆鍒堕�犱笟鐨勪腑蹇冿紝涓浗鏄埗閫犱笟澶у浗锛屼絾杩樹笉鏄己鍥姐�傚洜姝わ紝鍥藉纭畾浜嗛�氳繃淇℃伅鍖栧甫鍔ㄥ伐涓氬寲鐨勫浗绛栵紝鎺ㄥ姩鍒堕�犱紒涓氬疄鏂藉埗閫犱笟淇℃伅鍖栵紝浜у搧璁捐鍒堕�犲拰浼佷笟绠＄悊鐨勪俊鎭寲銆佺敓浜ц繃绋嬫帶鍒剁殑鏅鸿兘鍖栥�佸埗閫犺澶囩殑鏁版帶鍖栦互鍙婂挩璇㈡湇鍔＄殑缃戠粶鍖栵紝鍏ㄩ潰鎻愬崌鍒堕�犱笟鐨勭珵浜夊姏銆�</p>
- <div class="content_industry_list">
- <ul>
- <li>路 渚涘簲鍟嗗崗鍚屽钩鍙�</li>
- <li>路 鐗╂枡浠撳簱绠＄悊绯荤粺</li>
- <li>路 鍒堕�犳墽琛岀郴缁�</li>
- <li>路 鎴愬搧浠撳簱绠＄悊绯荤粺</li>
- <li>路 璐ㄩ噺杩芥函绯荤粺</li>
- <li>路 缁忛攢鍟嗙鐞嗗钩鍙�</li>
- </ul>
- <img src="../../img/p12.png" alt="">
- </div>
- </div>
- <div class="content_industry_card">
- <h3>鍟嗕笟娴侀��</h3>
- <p>闅忕潃浜掕仈缃戠殑蹇�熷彂灞曪紝鐢靛瓙鍟嗗姟琛屼笟鍙戝睍杩呯寷锛屼綔涓轰簰鑱旂綉鍜岀浉鍏虫湇鍔′笟涓柊涓氭�侊紝涓嶄粎鍒涢�犱簡鏂扮殑娑堣垂闇�姹傦紝鍚屾椂涔熷紩鍙戜簡鏂扮殑鎶曡祫鏂版疆锛屽紑杈熶簡灏变笟澧炴敹鏂版笭閬擄紝涓哄ぇ浼椼�佷竾浼楀垱鏂版彁渚涗簡鏂扮┖闂淬��</p>
- <div class="content_industry_list">
- <ul>
- <li>路 鐢靛晢绯荤粺</li>
- <li>路 浠撳簱绠＄悊绯荤粺</li>
- </ul>
- <img src="../../img/p13.png" alt="">
+ <div v-else-if="item.type === 'Wico'" class="wrapper skill">
+ <div class="content_title"><span v-text="item.title"></span></div>
+ <div class="content_skill">
+ <div class="content_skill_item" v-for="(icon, index) in item.iconlist" :key="index">
+ <div><img :src="icon.url" alt=""></div>
+ <p v-text="icon.title"></p>
</div>
</div>
</div>
- <div class="content_industry">
- <div class="content_industry_card">
- <h3>瑁呭鍒堕��</h3>
- <p>涓浗姝ｅ湪鎴愪负鍏ㄧ悆鍒堕�犱笟鐨勪腑蹇冿紝涓浗鏄埗閫犱笟澶у浗锛屼絾杩樹笉鏄己鍥姐�傚洜姝わ紝鍥藉纭畾浜嗛�氳繃淇℃伅鍖栧甫鍔ㄥ伐涓氬寲鐨勫浗绛栵紝鎺ㄥ姩鍒堕�犱紒涓氬疄鏂藉埗閫犱笟淇℃伅鍖栵紝浜у搧璁捐鍒堕�犲拰浼佷笟绠＄悊鐨勪俊鎭寲銆佺敓浜ц繃绋嬫帶鍒剁殑鏅鸿兘鍖栥�佸埗閫犺澶囩殑鏁版帶鍖栦互鍙婂挩璇㈡湇鍔＄殑缃戠粶鍖栵紝鍏ㄩ潰鎻愬崌鍒堕�犱笟鐨勭珵浜夊姏銆�</p>
- <div class="content_industry_list">
- <ul>
- <li>路 渚涘簲鍟嗗崗鍚屽钩鍙�</li>
- <li>路 鐗╂枡浠撳簱绠＄悊绯荤粺</li>
- <li>路 鍒堕�犳墽琛岀郴缁�</li>
- <li>路 鎴愬搧浠撳簱绠＄悊绯荤粺</li>
- <li>路 璐ㄩ噺杩芥函绯荤粺</li>
- <li>路 缁忛攢鍟嗙鐞嗗钩鍙�</li>
- <li>路 鍖昏嵂鐢靛晢</li>
- </ul>
- <img src="../../img/p14.png" alt="">
- </div>
- </div>
- <div class="content_industry_card">
- <h3>鍟嗕笟娴侀��</h3>
- <p>闅忕潃浜掕仈缃戠殑蹇�熷彂灞曪紝鐢靛瓙鍟嗗姟琛屼笟鍙戝睍杩呯寷锛屼綔涓轰簰鑱旂綉鍜岀浉鍏虫湇鍔′笟涓柊涓氭�侊紝涓嶄粎鍒涢�犱簡鏂扮殑娑堣垂闇�姹傦紝鍚屾椂涔熷紩鍙戜簡鏂扮殑鎶曡祫鏂版疆锛屽紑杈熶簡灏变笟澧炴敹鏂版笭閬擄紝涓哄ぇ浼椼�佷竾浼楀垱鏂版彁渚涗簡鏂扮┖闂淬��</p>
- <div class="content_industry_list">
- <ul>
- <li>路 浠撳偍绠＄悊绯荤粺</li>
- <li>路 閰嶉�佺鐞嗙郴缁�</li>
- </ul>
- <img src="../../img/p15.png" alt="">
+ <div v-else-if="item.type === 'Wcontent'" class="wrapper industry">
+ <div class="content_title"><span v-text="item.title"></span></div>
+ <div class="content_industry" v-for="(m, n) in Math.ceil(item.sublist.length / 2)" :key="n">
+ <div class="content_industry_card" v-if="index >= n * 2 && index < (n + 1) * 2" v-for="(cell, index) in item.sublist" :key="index">
+ <h3 v-text="cell.title"></h3>
+ <p v-text="cell.tip"></p>
+ <div class="content_industry_list">
+ <ul>
+ <li v-for="(text, i) in cell.details" :key="i">路 <span v-text="text"></span></li>
+ </ul>
+ <img :src="cell.url" alt="">
+ </div>
</div>
</div>
</div>
</div>
- <div class="wrapper join">
- <div class="content_title"><span>鍔犵洘浠ｇ悊</span></div>
+ <div class="wrapper industry other" v-if="otherlist">
+ <div class="content_title"><span v-text="othertype.name"></span></div>
<div class="content_skill">
- <div class="content_skill_item">
- <div><img src="../../img/p16.png" alt=""></div>
- <p>娉ㄥ唽鐢宠</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p17.png" alt=""></div>
- <p>鍟嗗姟娲借皥</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p18.png" alt=""></div>
- <p>鎻愪氦鏉愭枡</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p19.png" alt=""></div>
- <p>璧勮川瀹℃牳</p>
- </div>
- <div class="content_skill_item">
- <div><img src="../../img/p20.png" alt=""></div>
- <p>绛捐鍗忚</p>
+ <div class="content_skill_item" v-for="(other, index) in otherlist" :key="index">
+ <img :src="other.Image2" alt="" @click="jumpmenu(other)">
+ <p v-text="other.Title1"></p>
</div>
</div>
</div>
@@ -141,17 +62,90 @@
export default {
data () {
return {
-
+ menuId: null,
+ url: null,
+ details: null,
+ othertype: null,
+ otherlist: null
}
- }
+ },
+ watch: {
+ $route () {
+ this.menuId = this.$route.params.menuId
+ this.load()
+ }
+ },
+ methods: {
+ jumpmenu (menu) {
+ this.$router.push({name: menu.PageType, params: {menuId: menu.ID}})
+ },
+ load () {
+ let param = {
+ func: 'Web_productCenter_GetData',
+ ID: this.menuId
+ }
+ this.Service.getParamData(param).then(res => {
+ this.url = res.Image1
+ this.details = res.Detail.map(det => {
+ let item = {
+ type: det.TypeCharOne,
+ title: det.Title1
+ }
+ if (item.type === 'WLongText') {
+ item.longText = det.DOne[0].LongText
+ } else if (item.type === 'Wimages') {
+ item.imglist = det.DOne.map(cell => {
+ return {
+ title: cell.CDefine1,
+ tip: cell.CDefine2,
+ url: cell.Images,
+ position: cell.TypeCharThree,
+ color: cell.TypeCharTwo
+ }
+ })
+ } else if (item.type === 'Wico') {
+ item.iconlist = det.DOne.map(cell => {
+ return {
+ url: cell.Images,
+ title: cell.Title1
+ }
+ })
+ } else if (item.type === 'Wcontent') {
+ item.sublist = det.DOne.map(cell => {
+ return {
+ url: cell.Images,
+ title: cell.Title1,
+ tip: cell.LongText,
+ details: cell.DTwo.map(two => {
+ return two.Title1
+ })
+ }
+ })
+ }
+ return item
+ })
+ this.othertype = {
+ type: res.Type,
+ name: res.TypeName
+ }
+ this.otherlist = res.LinkDetail
+ })
+ }
+ },
+ created () {
+ this.menuId = this.$route.params.menuId
+ },
+ mounted () {
+ this.load()
+ }
}
</script>
<style lang="less" scoped>
@media (min-width: 751px){
- .p_hide {
- display: none !important;
- }
+ .banner {
+ margin-bottom: 0.5rem;
+ }
.m_img {
display: none;
}
@@ -172,16 +166,54 @@
.txt {
position: absolute;
- left: 1.16rem;
- bottom: 0.12rem;
- font-size: 20px;
+ width: 33%;
+ height: 33%;
+ left: 0;
+ top: 0;
+ font-size: 16px;
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
- color: rgba(255,255,255,1);
+ text-align: center;
+ padding: 0.1rem;
}
.txt2 {
- top: 0.19rem;
- left: 0.28rem;
+ top: 0;
+ left: 33%;
+ }
+ .txt3 {
+ left: auto;
+ top: 0;
+ right: 0;
+ }
+ .txt4 {
+ top: 33%;
+ }
+ .txt5 {
+ left: 33%;
+ top: 33%;
+ }
+ .txt6 {
+ left: auto;
+ top: 33%;
+ right: 0;
+ }
+ .txt7 {
+ height: auto;
+ top: auto;
+ bottom: 0;
+ }
+ .txt8 {
+ height: auto;
+ top: auto;
+ bottom: 0;
+ left: 33%;
+ }
+ .txt9 {
+ height: auto;
+ top: auto;
+ left: auto;
+ bottom: 0;
+ right: 0;
}
.content_title {
margin: .53rem 0 0.52rem;
@@ -261,6 +293,16 @@
margin-top: 0.3rem;
}
}
+ .wrapper.other .content_skill_item {
+ padding: 0 0.5rem;
+
+ img {
+ cursor: pointer;
+ }
+ p {
+ font-size: 0.16rem;
+ }
+ }
.join {
.content_title {
margin: 0.85rem 0 0.53rem;
@@ -313,12 +355,24 @@
.content_skill .content_skill_item div {
width: 0.75rem;
height: 0.75rem;
- }
- .m_hide {
- display: none !important;
- }
+ }
+ .wrapper.other .content_skill_item {
+ padding: 0 0.2rem;
+
+ p {
+ font-size: 0.16rem;
+ }
+ }
.main, .banner {
- margin-top: 1.14rem;
+ margin-top: 1.13rem;
+ }
+ .banner {
+ margin-bottom: 0.5rem;
+ img {
+ width: 140%;
+ max-width: none;
+ margin-left: -20%;
+ }
}
.content_scene {
width: 100%;
diff --git a/src/views/successCase/caseDetail.vue b/src/views/successCase/caseDetail.vue
index cb05cc1..9ff434c 100644
--- a/src/views/successCase/caseDetail.vue
+++ b/src/views/successCase/caseDetail.vue
@@ -39,114 +39,181 @@
</div>
</div>
</div>
-
- <div class="wrapper">
- <div class="content-box">
- <h3><span>搴旂敤鍦烘櫙</span></h3>
- <ul class="scene m_hide">
- <li>
- <img src="../../img/y1.png" alt="">
- <p>鍘熸枡鏀惰揣鍏ュ簱</p>
- </li>
- <li>
- <img src="../../img/y2.png" alt="">
- <p>鍘熸枡璐у埌浜哄強鍒嗘嫞涓婄嚎</p>
- </li>
- <li>
- <img src="../../img/y3.png" alt="">
- <p>鍗婃垚鍝佹殏瀛樺強杞繍涓婄嚎</p>
- </li>
- </ul>
- <ul class="scene m_hide">
- <li>
- <img src="../../img/y4.png" alt="">
- <p>鎴愬搧涓嬬嚎鍏ュ簱</p>
- </li>
- <li>
- <img src="../../img/y5.png" alt="">
- <p>鎴愬搧璐у埌浜轰粨鍌ㄧ鐞�</p>
- </li>
- <li>
- <img src="../../img/y6.png" alt="">
- <p>鎴愬搧鎺掑簭鍑哄簱鍙戣繍</p>
- </li>
- </ul>
-
- <ul class="scene p_hide">
- <li>
- <img src="../../img/y1.png" alt="">
- <p>鍘熸枡鏀惰揣鍏ュ簱</p>
- </li>
- <li>
- <img src="../../img/y2.png" alt="">
- <p>鍘熸枡璐у埌浜哄強鍒嗘嫞涓婄嚎</p>
- </li>
- <li>
- <img src="../../img/y3.png" alt="">
- <p>鍗婃垚鍝佹殏瀛樺強杞繍涓婄嚎</p>
- </li>
- <li>
- <img src="../../img/y4.png" alt="">
- <p>鎴愬搧涓嬬嚎鍏ュ簱</p>
- </li>
- <li>
- <img src="../../img/y5.png" alt="">
- <p>鎴愬搧璐у埌浜轰粨鍌ㄧ鐞�</p>
- </li>
- <li>
- <img src="../../img/y6.png" alt="">
- <p>鎴愬搧鎺掑簭鍑哄簱鍙戣繍</p>
- </li>
- </ul>
- </div>
- </div>
-
- <div class="wrapper" style="margin-bottom: 0.3rem;">
- <div class="content-bottom">
- <h3 class="h3"><span>鍚堜綔浼欎即</span></h3>
- </div>
- </div>
- <div class="m_hide" style="background-color: #F9FBFD;">
<div class="wrapper">
- <div class="content-bottom">
- <img src="../../img/c11.png" alt="">
+ <div class="content-box">
+ <h3><span>搴旂敤鍦烘櫙</span></h3>
+ <ul class="scene m_hide">
+ <li>
+ <img src="../../img/y1.png" alt="">
+ <p>鍘熸枡鏀惰揣鍏ュ簱</p>
+ </li>
+ <li>
+ <img src="../../img/y2.png" alt="">
+ <p>鍘熸枡璐у埌浜哄強鍒嗘嫞涓婄嚎</p>
+ </li>
+ <li>
+ <img src="../../img/y3.png" alt="">
+ <p>鍗婃垚鍝佹殏瀛樺強杞繍涓婄嚎</p>
+ </li>
+ </ul>
+ <ul class="scene m_hide">
+ <li>
+ <img src="../../img/y4.png" alt="">
+ <p>鎴愬搧涓嬬嚎鍏ュ簱</p>
+ </li>
+ <li>
+ <img src="../../img/y5.png" alt="">
+ <p>鎴愬搧璐у埌浜轰粨鍌ㄧ鐞�</p>
+ </li>
+ <li>
+ <img src="../../img/y6.png" alt="">
+ <p>鎴愬搧鎺掑簭鍑哄簱鍙戣繍</p>
+ </li>
+ </ul>
+
+ <ul class="scene p_hide">
+ <li>
+ <img src="../../img/y1.png" alt="">
+ <p>鍘熸枡鏀惰揣鍏ュ簱</p>
+ </li>
+ <li>
+ <img src="../../img/y2.png" alt="">
+ <p>鍘熸枡璐у埌浜哄強鍒嗘嫞涓婄嚎</p>
+ </li>
+ <li>
+ <img src="../../img/y3.png" alt="">
+ <p>鍗婃垚鍝佹殏瀛樺強杞繍涓婄嚎</p>
+ </li>
+ <li>
+ <img src="../../img/y4.png" alt="">
+ <p>鎴愬搧涓嬬嚎鍏ュ簱</p>
+ </li>
+ <li>
+ <img src="../../img/y5.png" alt="">
+ <p>鎴愬搧璐у埌浜轰粨鍌ㄧ鐞�</p>
+ </li>
+ <li>
+ <img src="../../img/y6.png" alt="">
+ <p>鎴愬搧鎺掑簭鍑哄簱鍙戣繍</p>
+ </li>
+ </ul>
</div>
</div>
- </div>
- <div class="three_box p_hide">
- <div><img src="../../img/he1.png" alt=""></div>
- <div><img src="../../img/he2.png" alt=""></div>
- <div><img src="../../img/he3.png" alt=""></div>
- </div>
- <div class="title">
- <a class="m_hide" style="visibility: hidden;">浜嗚В鏇村</a>
- <a class="title-m">鏌ョ湅鏇村</a>
+
+ <div class="wrapper" style="margin-bottom: 0.3rem;">
+ <div class="content-bottom">
+ <h3 class="h3"><span>鍚堜綔浼欎即</span></h3>
+ </div>
+ </div>
+ <div class="m_hide" style="background-color: #F9FBFD;">
+ <div class="wrapper">
+ <div class="content-bottom">
+ <img src="../../img/c11.png" alt="">
</div>
- </div>
+ </div>
+ </div>
+ <div class="three_box p_hide">
+ <div><img src="../../img/he1.png" alt=""></div>
+ <div><img src="../../img/he2.png" alt=""></div>
+ <div><img src="../../img/he3.png" alt=""></div>
+ </div>
+ <div class="title">
+ <a class="m_hide" style="visibility: hidden;">浜嗚В鏇村</a>
+ <a class="title-m">鏌ョ湅鏇村</a>
+ </div>
+ </div>
</div>
</template>
<script>
export default {
+ data () {
+ return {
+ menuId: null,
+ url: null,
+ details: null
+ }
+ },
+ watch: {
+ $route () {
+ this.menuId = this.$route.params.menuId
+ this.load()
+ }
+ },
+ methods: {
+ load () {
+ let param = {
+ func: 'Web_productCenter_GetData',
+ ID: this.menuId
+ }
+ this.Service.getParamData(param).then(res => {
+ this.url = res.Image1
+ this.details = res.Detail.map(det => {
+ let item = {
+ type: det.TypeCharOne,
+ title: det.Title1
+ }
+ if (item.type === 'WLongText') {
+ item.longText = det.DOne[0].LongText
+ } else if (item.type === 'Wimages') {
+ item.imglist = det.DOne.map(cell => {
+ return {
+ title: cell.CDefine1,
+ tip: cell.CDefine2,
+ url: cell.Images,
+ position: cell.TypeCharThree,
+ color: cell.TypeCharTwo
+ }
+ })
+ } else if (item.type === 'Wico') {
+ item.iconlist = det.DOne.map(cell => {
+ return {
+ url: cell.Images,
+ title: cell.Title1
+ }
+ })
+ } else if (item.type === 'Wcontent') {
+ item.sublist = det.DOne.map(cell => {
+ return {
+ url: cell.Images,
+ title: cell.Title1,
+ tip: cell.LongText,
+ details: cell.DTwo.map(two => {
+ return two.Title1
+ })
+ }
+ })
+ }
+ return item
+ })
+ })
+ }
+ },
+ created () {
+ this.menuId = this.$route.params.menuId
+ },
+ mounted () {
+ this.load()
+ }
}
</script>
<style lang="less" scoped>
-.warpper{
- width: 100%;
+.warpper {
+ width: 100%;
}
-.caseDetail{
- margin: 0;
- width: 100%;
+.caseDetail {
+ margin: 0;
+ width: 100%;
}
-h3{
- font-size: 0.16rem;
- color: #3A3A3C;
- padding-left: .06rem;
+h3 {
+ font-size: 0.16rem;
+ color: #3A3A3C;
+ padding-left: .06rem;
margin-top: 0.2rem;
position: relative;
}
-h3::after{
+h3::after {
content: '';
width:0.09rem;
height:0.45rem;
@@ -156,8 +223,8 @@
left: 0;
}
.content-img{
- box-sizing: border-box;
- margin: .4rem auto 0;
+ box-sizing: border-box;
+ margin: .4rem auto 0;
}
@media (max-width: 750px) and (min-width: 0){
.three_box{
@@ -173,10 +240,10 @@
}
}
- h3{
- font-size: .4rem;
+ h3 {
+ font-size: .4rem;
padding-left: 0.2rem;
- }
+ }
.h3::after{
width:1.15rem;
height:0.06rem;
@@ -186,127 +253,127 @@
left: calc(50% - 0.45rem);
}
- .content_title_p{
- color: #3e3e3e;
- font-size: .16rem;
- margin: 0 auto !important;
- font-size:0.24rem;
- font-family:PingFang-SC-Regular;
- font-weight:400;
- color:rgba(62,62,62,1);
- line-height:0.44rem;
- }
- .content_title,.content_title_p{
- width: 100%;
- box-sizing: border-box;
- padding: 0.6rem .43rem 0;
- }
- .content-img{
- width: 100%;
- height: 3.5rem;
- }
- .project{
- background: #f9f9f9;
- box-sizing: border-box;
- margin: .1rem auto;
- padding: .1rem 0;
- .program{
- width: 100%;
- height: auto;
- display: flex;
- padding: .34rem 0;
- dl{
- width: 25%;
- dt{
- width: .94rem;
- height: .94rem;
- margin: 0 auto;
- }
- dd{
- text-align: center;
- padding-top: .07rem;
- }
- }
+ .content_title_p {
+ color: #3e3e3e;
+ font-size: .16rem;
+ margin: 0 auto !important;
+ font-size:0.24rem;
+ font-family:PingFang-SC-Regular;
+ font-weight:400;
+ color:rgba(62,62,62,1);
+ line-height:0.44rem;
+ }
+ .content_title,.content_title_p{
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0.6rem .43rem 0;
+ }
+ .content-img{
+ width: 100%;
+ height: 3.5rem;
+ }
+ .project{
+ background: #f9f9f9;
+ box-sizing: border-box;
+ margin: .1rem auto;
+ padding: .1rem 0;
+ .program {
+ width: 100%;
+ height: auto;
+ display: flex;
+ padding: .34rem 0;
+ dl {
+ width: 25%;
+ dt {
+ width: .94rem;
+ height: .94rem;
+ margin: 0 auto;
}
+ dd {
+ text-align: center;
+ padding-top: .07rem;
+ }
+ }
}
- .content-box{
- background: #f9f9f9;
- box-sizing: border-box;
- margin: .4rem auto;
- padding: .1rem 0;
- ul{
- width: 100%;
- height: auto;
- display: flex;
- flex-wrap: wrap;
- margin: .2rem 0;
- li{
- width: 50%;
- padding: .08rem .18rem;
- img{
- display: block;
- width: 100%;
- height: 1.8rem;
- background: #747474;
- }
- p{
- text-align: center;
- margin: .1rem 0;
- }
- }
+ }
+ .content-box {
+ background: #f9f9f9;
+ box-sizing: border-box;
+ margin: .4rem auto;
+ padding: .1rem 0;
+ ul {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-wrap: wrap;
+ margin: .2rem 0;
+ li {
+ width: 50%;
+ padding: .08rem .18rem;
+ img {
+ display: block;
+ width: 100%;
+ height: 1.8rem;
+ background: #747474;
}
+ p {
+ text-align: center;
+ margin: .1rem 0;
+ }
+ }
}
- .content-bottom{
- width: 94%;
- box-sizing: border-box;
- margin: .4rem auto;
- padding: .1rem 0;
- h3{
- text-align: center;
- border:none;
- margin-bottom: .57rem;
- }
- ul{
- width: 100%;
- height: auto;
- display: flex;
- flex-wrap: wrap;
- li{
- width: 33.3%;
- padding: .08rem .1rem;
- img{
- display: block;
- width: 100%;
- height: .98rem;
- background: #747474;
- border: 1px #000 dashed;
- }
- }
- }
+ }
+ .content-bottom {
+ width: 94%;
+ box-sizing: border-box;
+ margin: .4rem auto;
+ padding: .1rem 0;
+ h3 {
+ text-align: center;
+ border:none;
+ margin-bottom: .57rem;
}
- .title{
- text-align: center;
- margin-bottom: 1.05rem;
- a:first-child{
- display: none;
+ ul {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-wrap: wrap;
+ li {
+ width: 33.3%;
+ padding: .08rem .1rem;
+ img {
+ display: block;
+ width: 100%;
+ height: .98rem;
+ background: #747474;
+ border: 1px #000 dashed;
}
- .title-m{
- display: inline-block;
- width: 3.38rem;
- height: 1.04rem;
- line-height: 1.04rem;
- border: 1px solid #52B6E7;
- color: #52B6E7;
- }
+ }
}
+ }
+ .title{
+ text-align: center;
+ margin-bottom: 1.05rem;
+ a:first-child {
+ display: none;
+ }
+ .title-m {
+ display: inline-block;
+ width: 3.38rem;
+ height: 1.04rem;
+ line-height: 1.04rem;
+ border: 1px solid #52B6E7;
+ color: #52B6E7;
+ }
+ }
}
@media (min-width: 751px){
- h3{
- span{
+ h3 {
+ span {
padding-left: 0.2rem;
}
}
- h3::after{
+ h3::after {
content: '';
width: 0.06rem;
height: 0.3rem;
@@ -315,137 +382,136 @@
top: -0.03rem;
left: 0.1rem;
}
- .content-bottom{
- .h3{
+ .content-bottom {
+ .h3 {
padding-left: 0.05rem;
- span{
+ span {
padding-left: 0.15rem;
}
}
- .h3::after{
+ .h3::after {
width: 0.06rem;
height: 0.3rem;
left: 0.05rem;
top: -0.02rem;
}
}
- .p_backg{
+ .p_backg {
background-color: #f9fbfd;
}
- .caseDetail{
- margin-top: 0.91rem;
- .content_title{
- margin: 0 auto;
- }
- .content_title_p{
- font-size: 0.16rem;
- color: #747474;
- line-height: .22rem;
- width: 11.92rem;
- margin: 0 auto;
- }
+ .caseDetail {
+ margin-top: 0.91rem;
+ .content_title {
+ margin: 0 auto;
}
- .project{
- width: 100%;
- background: #f9fbfd;
+ .content_title_p {
+ font-size: 0.16rem;
+ color: #747474;
+ line-height: .22rem;
+ width: 11.92rem;
+ margin: 0 auto;
}
- .content-box{
- width: 100%;
- padding: .15rem 0 .15rem;
- ul{
- width: 100%;
- height: auto;
- display: flex;
- flex-wrap: wrap;
- li{
- width: 33.3%;
- padding: .08rem .1rem;
- img{
- display: block;
- width: 100%;
- background: #747474;
- }
- p{
- text-align: center;
- margin: .1rem 0;
- }
- }
+ }
+ .project {
+ width: 100%;
+ background: #f9fbfd;
+ }
+ .content-box {
+ width: 100%;
+ padding: .15rem 0 .15rem;
+ ul {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-wrap: wrap;
+ li {
+ width: 33.3%;
+ padding: .08rem .1rem;
+ img {
+ display: block;
+ width: 100%;
+ background: #747474;
}
- }
- .content-bottom{
- width: 100%;
- ul{
- width: 100%;
- height: auto;
- display: flex;
- flex-wrap: wrap;
- li{
- width: 33.3%;
- padding: .08rem .1rem;
- img{
- display: block;
- width: 100%;
- height: .8rem;
- background: #747474;
- }
- p{
- text-align: center;
- margin: .1rem 0;
- }
- }
+ p {
+ text-align: center;
+ margin: .1rem 0;
}
+ }
}
- .title{
- width: 100%;
+ }
+ .content-bottom {
+ width: 100%;
+ ul {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-wrap: wrap;
+ li {
+ width: 33.3%;
+ padding: .08rem .1rem;
+ img {
+ display: block;
+ width: 100%;
+ height: .8rem;
+ background: #747474;
+ }
+ p {
+ text-align: center;
+ margin: .1rem 0;
+ }
+ }
+ }
+ }
+ .title {
+ width: 100%;
+ text-align: center;
+ a {
+ display: inline-block;
+ margin: 0 auto .8rem;
+ border-bottom: 1px solid #0070c0;
+ color: #0070c0;
+ }
+ .title-m {
+ display: none;
+ }
+ }
+ .content-img {
+ width: 12.32rem;
+ height: auto;
+ margin-top: 0.8rem;
+ }
+ .program {
+ width: 100%;
+ height: auto;
+ display: flex;
+ margin: .2rem 0;
+ dl {
+ margin-right: .8rem;
+ dt {
+ width: .94rem;
+ height: .94rem;
+ margin: 0 auto;
+ }
+ dd {
+ width: 1.8rem;
text-align: center;
- a{
- display: inline-block;
- margin: 0 auto .8rem;
- border-bottom: 1px solid #0070c0;
- color: #0070c0;
- }
- .title-m{
- display: none;
- }
+ padding-top: .07rem;
+ }
}
- .content-img{
- width: 12.32rem;
- height: auto;
- margin-top: 0.8rem;
- }
- .program{
- width: 100%;
- height: auto;
- display: flex;
- margin: .2rem 0;
- dl{
- margin-right: .8rem;
- dt{
- width: .94rem;
- height: .94rem;
- margin: 0 auto;
- }
- dd{
- width: 1.8rem;
- text-align: center;
- padding-top: .07rem;
- }
- }
-
- }
- .program:first-child{
+ }
+ .program:first-child {
margin-left: -0.55rem;
}
- .scene{
- width: 100%;
- height: 4.82rem;
- margin: .2rem 0;
- }
- .partner{
- width: 100%;
- height: auto;
- box-sizing: border-box;
- margin: .2rem 0 .4rem 0;
- }
+ .scene {
+ width: 100%;
+ height: 4.82rem;
+ margin: .2rem 0;
+ }
+ .partner {
+ width: 100%;
+ height: auto;
+ box-sizing: border-box;
+ margin: .2rem 0 .4rem 0;
+ }
}
</style>
diff --git a/src/views/successCase/index.vue b/src/views/successCase/index.vue
index 8df90d8..5dcca9b 100644
--- a/src/views/successCase/index.vue
+++ b/src/views/successCase/index.vue
@@ -9,51 +9,19 @@
<div class="content_title">
<span>妗堜緥璇︽儏</span>
</div>
- <div class="content">
- <div class="left_border">浠撳偍鐗╂祦</div>
+ <div class="content" v-for="(_case, index) in caselist" :key="index" :class="(index % 2) && 'f-right'">
+ <div class="left_border" :style="(index % 2) && 'float: right;'" v-text="_case.SubjClasName"></div>
<div class="contnt-describe">
- <div class="left" style="float: left;padding-top: 0.1rem;">
- <ul>
- <router-link to="/successCaseIndex" style="padding: 0;">
- <li><img src="../../img/s1.png" alt=""></li>
- </router-link>
- <router-link to="/successCaseIndex" style="padding: 0;">
- <li><img src="../../img/s2.png" alt=""></li>
- </router-link>
- <router-link to="/successCaseIndex" style="padding: 0;">
- <li><img src="../../img/s3.png" alt=""></li>
- </router-link>
- <router-link to="/successCaseIndex" style="padding: 0;">
- <li><img src="../../img/s4.png" alt=""></li>
- </router-link>
+ <div class="left" style="padding-top: 0.1rem;" :style="!(index % 2) && 'float: left;'">
+ <ul :style="(index % 2) && 'padding-left: 0.7rem;'">
+ <li v-for="(sub, i) in _case.Subject" :key="i" @click="jumpmenu(sub)">
+ <img :src="sub.Image3" alt="">
+ </li>
</ul>
</div>
<div class="right" style="position: relative;">
- <img src="../../img/s5.png" alt="" >
- <span v-if="isShow1" class="txt">鏄庣涓轰腑鐭虫补瀹炴柦浜嗙墿璧勬潯鐮佺鐞嗙郴缁燂紝瀹炵幇浜嗛渶姹傞儴闂ㄥ湪绾胯鍒掓姤鎵广�佷緵搴斿晢鍗忓悓閫佽揣銆侀」鐩幇鍦烘敹銆佸彂銆佺洏銆佸瓨绛夊姛鑳姐�傜郴缁熼噰鐢ㄤ簡浜掕仈缃戙�佹棤绾挎妧鏈潯鐮佹妧鏈浉缁撳悎鐨勬柟妗堣繘琛屽疄鏂斤紝涓轰腑鐭虫补鑺傜渷澶ч噺浜哄姏銆佺墿鍔涖��</span>
- </div>
- </div>
- <div class="left_border" style="float: right;margin-top: 0.5rem;">鏅鸿兘鍒堕��</div>
- <div class="contnt-describe" style="margin-bottom: 1.48rem;">
- <div class="left">
- <ul style="margin-left: 1rem;">
- <router-link to="/successCaseIndex" style="padding: 0;">
- <li><img src="../../img/s7.png" alt=""></li>
- </router-link>
- <router-link to="/successCaseIndex" style="padding: 0;">
- <li><img src="../../img/s8.png" alt=""></li>
- </router-link>
- <router-link to="/successCaseIndex" style="padding: 0;">
- <li><img src="../../img/s9.png" alt=""></li>
- </router-link>
- <router-link to="/successCaseIndex" style="padding: 0;">
- <li><img src="../../img/s10.png" alt=""></li>
- </router-link>
- </ul>
- </div>
- <div class="right" style="position: relative;">
- <img src="../../img/s6.png" alt="">
- <span v-if="isShow2" class="txt">鏄庣涓轰腑骞挎牳瀹炴柦浜嗙墿璧勬潯鐮佽拷婧郴缁燂紝璇ョ郴缁熷熀浜庢槑绉戝彲閰嶇疆骞冲彴K9 1.0瀹炴柦锛屼粠鏉ユ枡楠屾敹寮�濮嬶紝缁忚繃閿�鍞嚭搴撱�佺敓浜ц閰嶇瓑鐜妭锛屽畬鎴愯拷婧暟鎹殑閲囬泦骞舵彁渚涗骇鍝佺敓鍛藉懆鏈熺殑鏁版嵁杩芥函鏌ヨ</span>
+ <img :src="_case.Images" alt="" >
+ <!-- <span class="txt"></span> -->
</div>
</div>
</div>
@@ -62,40 +30,13 @@
<!-- 绉诲姩绔牱寮� -->
<div class="webapp p_hide">
<h3 class="content_title2 fadeInUp zoomIn animated"><span>妗堜緥璇︽儏</span></h3>
- <div class="project" style="padding: 0.2rem 0 0.3rem;">
- <h3 class="content_title3"><span>浠撳偍鐗╂祦</span></h3>
- <div class="img_box"><img src="../../img/an2.png" alt=""></div>
+ <div class="project" v-for="(_case, index) in caselist" :key="index" style="padding: 0.1rem 0 0.3rem;">
+ <h3 class="content_title3"><span v-text="_case.SubjClasName"></span></h3>
+ <div class="img_box"><img :src="_case.Images" alt=""></div>
<div class="three_box">
- <router-link tag="div" to="/successCaseIndex">
- <img src="../../img/an3.png" alt="">
- </router-link>
- <router-link tag="div" to="/successCaseIndex">
- <img src="../../img/an4.png" alt="">
- </router-link>
- <router-link tag="div" to="/successCaseIndex">
- <img src="../../img/an5.png" alt="">
- </router-link>
- <router-link tag="div" to="/successCaseIndex">
- <img src="../../img/an6.png" alt="">
- </router-link>
- </div>
- </div>
- <div class="project" style="padding: 0.2rem 0 0.3rem;margin-bottom: 0.8rem;">
- <h3 class="content_title3"><span>鏅鸿兘鍒堕��</span></h3>
- <div class="img_box"><img src="../../img/an7.png" alt=""></div>
- <div class="three_box">
- <router-link tag="div" to="/successCaseIndex">
- <img src="../../img/an8.png" alt="">
- </router-link>
- <router-link tag="div" to="/successCaseIndex">
- <img src="../../img/an9.png" alt="">
- </router-link>
- <router-link tag="div" to="/successCaseIndex">
- <img src="../../img/an10.png" alt="">
- </router-link>
- <router-link tag="div" to="/successCaseIndex">
- <img src="../../img/an11.png" alt="">
- </router-link>
+ <div v-for="(sub, i) in _case.Subject" :key="i" @click="jumpmenu(sub)">
+ <img :src="sub.Image3" alt="">
+ </div>
</div>
</div>
</div>
@@ -106,20 +47,35 @@
export default {
data () {
return {
- isShow1: false,
- isShow2: true
+ caselist: null
}
- },
+ },
+ methods: {
+ jumpmenu (menu) {
+ this.$router.push({name: menu.PageType, params: {menuId: menu.ID}})
+ },
+ load () {
+ this.Service.getBaseData('Web_Case_GetData').then(res => {
+ this.caselist = res.Case
+ })
+ let param = {
+ func: 'Web_Center_GetData',
+ Centertype: 'Product'
+ }
+ this.Service.getParamData(param).then(res => {
+
+ })
+ }
+ },
mounted () {
- document.body.scrollTop = 0
- document.documentElement.scrollTop = 0
+ this.load()
}
}
</script>
<style lang="less" scoped>
.content_title {
- padding: 0.94rem 0 1.03rem;
+ padding: 0.94rem 0 0.2rem;
p {
color: #838383;
font-size: .16rem;
@@ -150,15 +106,11 @@
margin-bottom: .2rem;
}
}
- .content:nth-child(2) {
- text-align: center;
- a {
- color:#3B3B3C;
- padding: 0.06rem 0.2rem;
- display: inline-block;
- font-size: 0.16rem;
- margin: 0.21rem 0.1rem;
- }
+ .content {
+ padding-top: 0.4rem;
+ }
+ .content:last-child {
+ padding-bottom: 0.5rem;
}
@media (min-width: 751px) {
.contnt-describe {
@@ -184,22 +136,18 @@
.right {
margin-top: .3rem;
float: right;
- // width: 3.85rem;
- // height: 2.38rem;
- background: url(../../img/shiyou.png);
- background-size: 100% 100%;
position: relative;
.txt {
position: absolute;
left: 0.12rem;
top: 2.65rem;
- width:545px;
- height:67px;
- font-size:16px;
- font-family:MicrosoftYaHei;
- font-weight:400;
- color:rgba(255,255,255,1);
- line-height:25px;
+ width: 545px;
+ height: 67px;
+ font-size: 16px;
+ font-family: MicrosoftYaHei;
+ font-weight: 400;
+ color: rgba(255,255,255,1);
+ line-height: 25px;
text-align: left;
}
p {
@@ -225,15 +173,17 @@
}
}
}
- .contnt-describe:nth-child(2n) {
- .right {
- float: left;
- }
- .left {
- float: right;
- span {
- text-align: right;
+ .content.f-right {
+ .contnt-describe {
+ .right {
+ float: left;
+ }
+ .left {
float: right;
+ span {
+ text-align: right;
+ float: right;
+ }
}
}
}
@@ -244,6 +194,7 @@
position: relative;
padding-left: .2rem;
margin-bottom: 0.3rem;
+ font-size: 0.16rem;
float: none;
}
.left_border::after {
@@ -267,7 +218,7 @@
margin-top: 0.2rem;
position: relative;
span {
- font-size: 0.36rem;
+ font-size: 0.30rem;
margin-left: 0.18rem;
margin-top: 0.02rem;
display: inline-block;
@@ -275,8 +226,8 @@
}
.content_title3::after {
content: '';
- width:0.09rem;
- height:0.45rem;
+ width: 0.08rem;
+ height:0.36rem;
background:rgba(0,112,192,1);
position: absolute;
top: 0.05rem;
--
Gitblit v1.8.0