BJ_web_developers / zxznweb

Commit 1e0bb6b537d570fd1892f9c0d46358a0f9b3e746

Authored by liuqimichale
1 parent f7dec07d

经典案例 完成

Inline Side-by-side
Showing 7 changed files with 280 additions and 158 deletions
src/router/index.js
  View file @1e0bb6b
@@ -47,9 +47,13 @@ export default new Router({ @@ -47,9 +47,13 @@ export default new Router({
47 path: '/case', 47 path: '/case',
48 name: 'case', 48 name: 'case',
49 component: () => import('@/views/case') 49 component: () => import('@/views/case')
  50 + },
  51 + {
  52 + path: '/caseDetail/:caseId',
  53 + name: 'caseDetail',
  54 + component: () => import('@/views/caseDetail')
50 } 55 }
51 56
52 57
53 -  
54 ] 58 ]
55 }) 59 })
src/views/case/components/selectTab0.vue
  View file @1e0bb6b
1 <template> 1 <template>
2 - <div>1</div> 2 + <div class="widthCommon" style="margin-bottom: 20px;">
  3 + <ul class="caseList">
  4 + <li v-for="item in 10" :key="item">
  5 + <img src="../../../assets/images/case/case.png" alt="">
  6 + <p class="caseName">项目名称：黄石智慧停车项目</p>
  7 + <p class="caseAddress">项目地址： 湖北· 黄石</p>
  8 + <ul class="mark-wrapper">
  9 + <li>
  10 + <span>车位：10000</span>
  11 + </li>
  12 + <li>
  13 + <span>规划、</span>
  14 + <span>建设、</span>
  15 + <span>运营</span>
  16 + </li>
  17 + </ul>
  18 +
  19 + <div class="pointer toDetail" @click="toDetail">查看详情 》</div>
  20 + </li>
  21 + </ul>
  22 +
  23 + <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
  24 + </v-page>
  25 + </div>
3 </template> 26 </template>
4 27
5 <script> 28 <script>
6 export default { 29 export default {
7 - name: 'selectTab0' 30 + name: 'selectTab0',
  31 + methods:{
  32 + toDetail:function () {
  33 + this.$router.push({
  34 + name: 'caseDetail',
  35 + params: { caseId: 123 }
  36 + })
  37 + this.$router.push({
  38 + name: 'newsDetail',
  39 + params: { newsId: ID }
  40 + })
  41 + }
  42 + }
8 } 43 }
9 </script> 44 </script>
10 45
11 <style scoped lang="scss"> 46 <style scoped lang="scss">
12 - 47 + .caseList{
  48 + overflow: hidden;
  49 + }
  50 + .caseList>li{
  51 + width: 400px;
  52 + height: 529px;
  53 + float: left;
  54 + margin-right:90px ;
  55 + margin-bottom: 92px;
  56 + background:rgba(228,228,228,1);
  57 + img{
  58 + width: 400px;
  59 + height: 354px;
  60 + }
  61 + }
  62 + .caseList>li:nth-of-type(3n+0){
  63 + margin-right: 0;
  64 + }
  65 + .caseName,.caseAddress{
  66 + padding-left: 20px;
  67 + font-size: 14px;
  68 + color: #333;
  69 + }
  70 + .caseName{
  71 + padding-top: 20px;
  72 + padding-bottom: 20px;
  73 + }
  74 + .mark-wrapper{
  75 + margin: 20px 0;
  76 + padding-left: 20px;
  77 + overflow: hidden;
  78 + }
  79 + .mark-wrapper li{
  80 + padding: 5px 10px;
  81 + float: left;
  82 + margin-right: 17px;
  83 + background:rgba(54,114,248,.4);
  84 + border-radius:4px;
  85 + font-size: 14px;
  86 + color: #333;
  87 + }
  88 + .toDetail{
  89 + text-align: center;
  90 + font-size: 14px;
  91 + color: #3366CC;
  92 + }
13 </style> 93 </style>
src/views/case/components/selectTab1.vue
  View file @1e0bb6b
1 <template> 1 <template>
2 - <div></div> 2 + <div class="widthCommon" style="margin-bottom: 20px;">
  3 + <ul class="caseList">
  4 + <li v-for="item in 10" :key="item">
  5 + <img src="../../../assets/images/case/case.png" alt="">
  6 + <p class="caseName">项目名称：黄石智慧停车项目</p>
  7 + <p class="caseAddress">项目地址： 湖北· 黄石</p>
  8 + <ul class="mark-wrapper">
  9 + <li>
  10 + <span>车位：10000</span>
  11 + </li>
  12 + <li>
  13 + <span>规划、</span>
  14 + <span>建设、</span>
  15 + <span>运营</span>
  16 + </li>
  17 + </ul>
  18 +
  19 + <div class="pointer toDetail">查看详情 》</div>
  20 + </li>
  21 + </ul>
  22 +
  23 + <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
  24 + </v-page>
  25 + </div>
3 </template> 26 </template>
4 27
5 <script> 28 <script>
@@ -9,5 +32,50 @@ export default { @@ -9,5 +32,50 @@ export default {
9 </script> 32 </script>
10 33
11 <style scoped lang="scss"> 34 <style scoped lang="scss">
12 - 35 + .caseList{
  36 + overflow: hidden;
  37 + }
  38 + .caseList>li{
  39 + width: 400px;
  40 + height: 529px;
  41 + float: left;
  42 + margin-right:90px ;
  43 + margin-bottom: 92px;
  44 + background:rgba(228,228,228,1);
  45 + img{
  46 + width: 400px;
  47 + height: 354px;
  48 + }
  49 + }
  50 + .caseList>li:nth-of-type(3n+0){
  51 + margin-right: 0;
  52 + }
  53 + .caseName,.caseAddress{
  54 + padding-left: 20px;
  55 + font-size: 14px;
  56 + color: #333;
  57 + }
  58 + .caseName{
  59 + padding-top: 20px;
  60 + padding-bottom: 20px;
  61 + }
  62 + .mark-wrapper{
  63 + margin: 20px 0;
  64 + padding-left: 20px;
  65 + overflow: hidden;
  66 + }
  67 + .mark-wrapper li{
  68 + padding: 5px 10px;
  69 + float: left;
  70 + margin-right: 17px;
  71 + background:rgba(54,114,248,.4);
  72 + border-radius:4px;
  73 + font-size: 14px;
  74 + color: #333;
  75 + }
  76 + .toDetail{
  77 + text-align: center;
  78 + font-size: 14px;
  79 + color: #3366CC;
  80 + }
13 </style> 81 </style>
src/views/case/components/selectTab2.vue
  View file @1e0bb6b
1 <template> 1 <template>
2 - <div></div> 2 + <div class="widthCommon" style="margin-bottom: 20px;">
  3 + <ul class="caseList">
  4 + <li v-for="item in 10" :key="item">
  5 + <img src="../../../assets/images/case/case.png" alt="">
  6 + <p class="caseName">项目名称：黄石智慧停车项目</p>
  7 + <p class="caseAddress">项目地址： 湖北· 黄石</p>
  8 + <ul class="mark-wrapper">
  9 + <li>
  10 + <span>车位：10000</span>
  11 + </li>
  12 + <li>
  13 + <span>规划、</span>
  14 + <span>建设、</span>
  15 + <span>运营</span>
  16 + </li>
  17 + </ul>
  18 +
  19 + <div class="pointer toDetail">查看详情 》</div>
  20 + </li>
  21 + </ul>
  22 +
  23 + <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
  24 + </v-page>
  25 + </div>
3 </template> 26 </template>
4 27
5 <script> 28 <script>
@@ -9,5 +32,50 @@ export default { @@ -9,5 +32,50 @@ export default {
9 </script> 32 </script>
10 33
11 <style scoped lang="scss"> 34 <style scoped lang="scss">
12 - 35 + .caseList{
  36 + overflow: hidden;
  37 + }
  38 + .caseList>li{
  39 + width: 400px;
  40 + height: 529px;
  41 + float: left;
  42 + margin-right:90px ;
  43 + margin-bottom: 92px;
  44 + background:rgba(228,228,228,1);
  45 + img{
  46 + width: 400px;
  47 + height: 354px;
  48 + }
  49 + }
  50 + .caseList>li:nth-of-type(3n+0){
  51 + margin-right: 0;
  52 + }
  53 + .caseName,.caseAddress{
  54 + padding-left: 20px;
  55 + font-size: 14px;
  56 + color: #333;
  57 + }
  58 + .caseName{
  59 + padding-top: 20px;
  60 + padding-bottom: 20px;
  61 + }
  62 + .mark-wrapper{
  63 + margin: 20px 0;
  64 + padding-left: 20px;
  65 + overflow: hidden;
  66 + }
  67 + .mark-wrapper li{
  68 + padding: 5px 10px;
  69 + float: left;
  70 + margin-right: 17px;
  71 + background:rgba(54,114,248,.4);
  72 + border-radius:4px;
  73 + font-size: 14px;
  74 + color: #333;
  75 + }
  76 + .toDetail{
  77 + text-align: center;
  78 + font-size: 14px;
  79 + color: #3366CC;
  80 + }
13 </style> 81 </style>
src/views/case/index.vue
  View file @1e0bb6b
@@ -18,30 +18,13 @@ @@ -18,30 +18,13 @@
18 </div> 18 </div>
19 </div> 19 </div>
20 20
21 - <div class="widthCommon" style="margin-bottom: 20px;">  
22 - <ul class="caseList">  
23 - <li v-for="item in 10" :key="item">  
24 - <img src="../../assets/images/case/case.png" alt="">  
25 - <p class="caseName">项目名称：黄石智慧停车项目</p>  
26 - <p class="caseAddress">项目地址： 湖北· 黄石</p>  
27 - <ul class="mark-wrapper">  
28 - <li>  
29 - <span>车位：10000</span>  
30 - </li>  
31 - <li>  
32 - <span>规划、</span>  
33 - <span>建设、</span>  
34 - <span>运营</span>  
35 - </li>  
36 - </ul> 21 + <div class="widthCommon">
  22 + <keep-alive>
  23 + <component :is="tabView"></component>
  24 + </keep-alive>
  25 + </div>
37 26
38 - <div class="pointer toDetail">查看详情 》</div>  
39 - </li>  
40 - </ul>  
41 27
42 - <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">  
43 - </v-page>  
44 - </div>  
45 28
46 </div> 29 </div>
47 </template> 30 </template>
@@ -81,50 +64,5 @@ export default { @@ -81,50 +64,5 @@ export default {
81 </script> 64 </script>
82 65
83 <style scoped lang="scss"> 66 <style scoped lang="scss">
84 -.caseList{  
85 - overflow: hidden;  
86 -}  
87 -.caseList>li{  
88 - width: 400px;  
89 - height: 529px;  
90 - float: left;  
91 - margin-right:90px ;  
92 - margin-bottom: 92px;  
93 - background:rgba(228,228,228,1);  
94 - img{  
95 - width: 400px;  
96 - height: 354px;  
97 - }  
98 -}  
99 -.caseList>li:nth-of-type(3n+0){  
100 - margin-right: 0;  
101 -}  
102 - .caseName,.caseAddress{  
103 - padding-left: 20px;  
104 - font-size: 14px;  
105 - color: #333;  
106 - }  
107 - .caseName{  
108 - padding-top: 20px;  
109 - padding-bottom: 20px;  
110 - }  
111 - .mark-wrapper{  
112 - margin: 20px 0;  
113 - padding-left: 20px;  
114 - overflow: hidden;  
115 - }  
116 - .mark-wrapper li{  
117 - padding: 5px 10px;  
118 - float: left;  
119 - margin-right: 17px;  
120 - background:rgba(54,114,248,.4);  
121 - border-radius:4px;  
122 - font-size: 14px;  
123 - color: #333;  
124 - }  
125 - .toDetail{  
126 - text-align: center;  
127 - font-size: 14px;  
128 - color: #3366CC;  
129 - } 67 +
130 </style> 68 </style>
src/views/caseDetail/index.vue
View file @1e0bb6b
No preview for this file type
src/views/news/index deleted
View file @f7dec07
1 -<template>  
2 - <div>  
3 - <commonProduct mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonProduct>  
4 - <div class="tab-wrapper">  
5 - <ul class="tab-main widthCommon">  
6 - <li  
7 - v-for="(item, index) in tabData"  
8 - :key="item"  
9 - @click="changeTab(index,item)"  
10 - :class="{tabActive:currentIndex==index}"  
11 - >{{item}}</li>  
12 - </ul>  
13 - </div>  
14 - <div class="bread ">  
15 - <div class=" widthCommon">  
16 - 您所在位置: <span class="pointer" @click="$router.push({name:'home'})">首页</span> -> 新闻中心 -> {{name}}  
17 - </div>  
18 - </div>  
19 - <div class="widthCommon">  
20 - <keep-alive>  
21 - <component :is="tabView"></component>  
22 - </keep-alive>  
23 - </div>  
24 -  
25 - </div>  
26 -</template>  
27 -  
28 -<script>  
29 -import commonProduct from '@/components/commonBanner'  
30 -import selectTab0 from './components/selectTab0'  
31 -import selectTab1 from './components/selectTab1'  
32 -import selectTab2 from './components/selectTab2'  
33 -import selectTab3 from './components/selectTab3'  
34 -export default {  
35 - name: 'index',  
36 - components: {  
37 - commonProduct, selectTab0, selectTab1, selectTab2, selectTab3  
38 - },  
39 - data(){  
40 - return{  
41 - tabData:[  
42 - '公司要闻','行业动态','技术前沿', '团队活动'  
43 - ],  
44 - currentIndex:0,  
45 - tabView:'selectTab0',  
46 - name:'公司要闻'  
47 - }  
48 - },  
49 -  
50 -}  
51 -</script>  
52 -  
53 -<style scoped lang="scss">  
54 - .tab-wrapper{  
55 - height:50px;  
56 - background:rgba(237,237,237,1);  
57 - /*line-height: 50px;*/  
58 - padding-top: 5px;  
59 - }  
60 - .tab-main{  
61 - padding-left: 100px;  
62 - height: 45px;  
63 - line-height: 45px;  
64 - }  
65 - .tab-main li{  
66 - float: left;  
67 - margin-right: 50px;  
68 - width: 125px;  
69 -  
70 - border-radius: 5px;  
71 - color: #333;  
72 - font-size: 16px;  
73 - text-align: center;  
74 - cursor: pointer;  
75 - }  
76 - .tabActive{  
77 - background: #FFF;  
78 - }  
79 -</style>