BJ_web_developers / zxznweb

Commit 7180b1378a1d22a0b73be99afa0f6f56e1b5142d

Authored by liuqimichale
1 parent 3ed210e6

产品中心

Inline Side-by-side
Showing 8 changed files with 187 additions and 12 deletions
package.json
  View file @7180b13
... ... @@ -21,7 +21,8 @@
21 21 "vue-awesome-swiper": "^3.1.3",
22 22 "vue-loader": "^13.7.3",
23 23 "vue-router": "^3.0.1",
24   - "vue-style-loader": "^3.1.2"
  24 + "vue-style-loader": "^3.1.2",
  25 + "vue_pageination": "^1.1.2"
25 26 },
26 27 "devDependencies": {
27 28 "autoprefixer": "^7.1.2",
... ...
src/assets/css/commonCss/reset.css
  View file @7180b13
... ... @@ -128,7 +128,7 @@ table {
128 128 .flexfm{
129 129 flex: 1;
130 130 }
131   -
  131 +/*定位*/
132 132 .pos-rel{
133 133 position: relative;
134 134 }
... ... @@ -140,10 +140,11 @@ table {
140 140 .nav-active{
141 141 color: #F00;
142 142 }
143   -
  143 +/*banner上下间距*/
144 144 .textCommonPadding{
145 145 padding: 49px 0;
146 146 }
  147 +/*banner蓝色字*/
147 148 .heading-text{
148 149 padding-bottom: 29px;
149 150 text-align: center;
... ... @@ -155,10 +156,60 @@ table {
155 156 color: #333;
156 157 text-align: center;
157 158 }
  159 +/*灰色背景*/
158 160 .bgCommon{
159 161 background:rgba(238,238,238,1);
160 162 }
  163 +/*手指鼠标*/
161 164 .pointer{
162 165 cursor: pointer;
163 166 }
164 167  
  168 + /*分页*/
  169 +.pageination_align {
  170 + text-align: center
  171 +}
  172 +
  173 +.pageination {
  174 + color: #48576a;
  175 + font-size: 12px;
  176 + display: inline-block;
  177 + user-select: none;
  178 +}
  179 +
  180 +.pagination_page {
  181 + padding: 0 4px;
  182 + border: 1px solid #d1dbe5;
  183 + border-right: 0;
  184 + background: #fff;
  185 + font-size: 13px;
  186 + min-width: 28px;
  187 + height: 28px;
  188 + line-height: 28px;
  189 + cursor: pointer;
  190 + box-sizing: border-box;
  191 + text-align: center;
  192 + float: left;
  193 +}
  194 +
  195 +.pagination_page_right {
  196 + border-right: 1px solid #d1dbe5;
  197 +}
  198 +
  199 +.pagination_page:hover {
  200 + color: #20a0ff;
  201 +}
  202 +
  203 +.disabled {
  204 + color: #e4e4e4 !important;
  205 + background-color: #fff;
  206 + cursor: not-allowed;
  207 +}
  208 +
  209 +.pagination_page_active {
  210 + border-color: #20a0ff;
  211 + background-color: #20a0ff;
  212 + color: #fff !important;;
  213 + cursor: default;
  214 +}
  215 +
... ...
src/assets/images/product/tablist0.png 0 → 100644
View file @7180b13

689 KB
src/assets/images/product/tablist1.png 0 → 100644
View file @7180b13

417 KB
src/assets/images/product/tablist2.png 0 → 100644
View file @7180b13

553 KB
src/views/product/components/selectTab0.vue
  View file @7180b13
1 1 <template>
2   - <div>0</div>
  2 + <div class="widthCommon">
  3 + <ul class="tabCon">
  4 + <li v-for="i in 10" :key="i">
  5 + <div class="tabListImg">
  6 + <img src="../../../assets/images/product/tablist0.png" alt="">
  7 + </div>
  8 + <p class="tabListText">城市级智慧停车云平台</p>
  9 + </li>
  10 + </ul>
  11 +
  12 + </div>
3 13 </template>
4 14  
5 15 <script>
  16 +
6 17 export default {
7   - name: 'selectTab0'
  18 + name: 'selectTab0',
  19 +
  20 +
8 21 }
9 22 </script>
10 23  
11 24 <style scoped lang="scss">
12   -
  25 +.tabCon{
  26 + overflow: hidden;
  27 +}
  28 + .tabCon li{
  29 + width: 427px;
  30 + height: 360px;
  31 + margin: 0 30px 30px 0;
  32 + float: left;
  33 + }
  34 +.tabCon li:nth-child(3n+0){
  35 + margin-right: 0;
  36 +}
  37 + .tabListImg{
  38 + width:427px;
  39 + height:321px;
  40 + padding: 10px 10px;
  41 + background:rgba(255,255,255,1);
  42 + border:2px solid rgba(203,203,203,1);
  43 + }
  44 + .tabListText{
  45 + margin-top: 20px;
  46 + font-size: 14px;
  47 + color: #333;
  48 + text-align: center;
  49 + }
  50 + .tabListImg img{
  51 + width: 407px;
  52 + height: 301px;
  53 + }
13 54 </style>
... ...
src/views/product/components/selectTab1.vue
  View file @7180b13
1 1 <template>
2   - <div>1</div>
  2 + <div class="widthCommon">
  3 + <ul class="tabCon">
  4 + <li v-for="i in 10" :key="i">
  5 + <div class="tabListImg">
  6 + <img src="../../../assets/images/product/tablist1.png" alt="">
  7 + </div>
  8 + <p class="tabListText">城市级智慧停车云平台</p>
  9 + </li>
  10 + </ul>
  11 +
  12 + </div>
3 13 </template>
4 14  
5 15 <script>
  16 +
6 17 export default {
7   - name: 'selectTab1'
  18 + name: 'selectTab1',
  19 +
  20 +
8 21 }
9 22 </script>
10 23  
11 24 <style scoped lang="scss">
12   -
  25 + .tabCon{
  26 + overflow: hidden;
  27 + }
  28 + .tabCon li{
  29 + width: 427px;
  30 + height: 360px;
  31 + margin: 0 30px 30px 0;
  32 + float: left;
  33 + }
  34 + .tabCon li:nth-child(3n+0){
  35 + margin-right: 0;
  36 + }
  37 + .tabListImg{
  38 + width:427px;
  39 + height:321px;
  40 + padding: 10px 10px;
  41 + background:rgba(255,255,255,1);
  42 + border:2px solid rgba(203,203,203,1);
  43 + }
  44 + .tabListText{
  45 + margin-top: 20px;
  46 + font-size: 14px;
  47 + color: #333;
  48 + text-align: center;
  49 + }
  50 + .tabListImg img{
  51 + width: 407px;
  52 + height: 301px;
  53 + }
13 54 </style>
... ...
src/views/product/components/selectTab2.vue
  View file @7180b13
1 1 <template>
2   - <div>2</div>
  2 + <div class="widthCommon">
  3 + <ul class="tabCon">
  4 + <li v-for="i in 10" :key="i">
  5 + <div class="tabListImg">
  6 + <img src="../../../assets/images/product/tablist2.png" alt="">
  7 + </div>
  8 + <p class="tabListText">城市级智慧停车云平台</p>
  9 + </li>
  10 + </ul>
  11 +
  12 + </div>
3 13 </template>
4 14  
5 15 <script>
  16 +
6 17 export default {
7   - name: 'selectTab2'
  18 + name: 'selectTab2',
  19 +
  20 +
8 21 }
9 22 </script>
10 23  
11 24 <style scoped lang="scss">
12   -
  25 + .tabCon{
  26 + overflow: hidden;
  27 + }
  28 + .tabCon li{
  29 + width: 427px;
  30 + height: 360px;
  31 + margin: 0 30px 30px 0;
  32 + float: left;
  33 + }
  34 + .tabCon li:nth-child(3n+0){
  35 + margin-right: 0;
  36 + }
  37 + .tabListImg{
  38 + width:427px;
  39 + height:321px;
  40 + padding: 10px 10px;
  41 + background:rgba(255,255,255,1);
  42 + border:2px solid rgba(203,203,203,1);
  43 + }
  44 + .tabListText{
  45 + margin-top: 20px;
  46 + font-size: 14px;
  47 + color: #333;
  48 + text-align: center;
  49 + }
  50 + .tabListImg img{
  51 + width: 407px;
  52 + height: 301px;
  53 + }
13 54 </style>
... ...