刘淇 / 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 47 path: '/case',
48 48 name: 'case',
49 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 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 26 </template>
4 27  
5 28 <script>
6 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 44 </script>
10 45  
11 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 93 </style>
... ...
src/views/case/components/selectTab1.vue
  View file @1e0bb6b
1 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 26 </template>
4 27  
5 28 <script>
... ... @@ -9,5 +32,50 @@ export default {
9 32 </script>
10 33  
11 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 81 </style>
... ...
src/views/case/components/selectTab2.vue
  View file @1e0bb6b
1 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 26 </template>
4 27  
5 28 <script>
... ... @@ -9,5 +32,50 @@ export default {
9 32 </script>
10 33  
11 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 81 </style>
... ...
src/views/case/index.vue
  View file @1e0bb6b
... ... @@ -18,30 +18,13 @@
18 18 </div>
19 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 29 </div>
47 30 </template>
... ... @@ -81,50 +64,5 @@ export default {
81 64 </script>
82 65  
83 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 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>