wxy пре 4 година
родитељ
комит
abc79bda9e
5 измењених фајлова са 328 додато и 153 уклоњено
  1. BIN
      src/assets/er2.png
  2. BIN
      src/assets/er3.png
  3. BIN
      src/assets/er4.jpg
  4. BIN
      src/assets/icon.png
  5. 328 153
      src/views/index.vue

BIN
src/assets/er2.png


BIN
src/assets/er3.png


BIN
src/assets/er4.jpg


BIN
src/assets/icon.png


+ 328 - 153
src/views/index.vue

@@ -5,7 +5,9 @@
         <el-row>
           <el-col :span="24" class="top1">
             <div class="w_1200">
-              <el-col class="top1_img"> </el-col>
+              <el-col class="top1_img" v-if="show">
+                <el-col class="top1_close" @click.native="close()">X</el-col>
+              </el-col>
             </div>
           </el-col>
         </el-row>
@@ -15,49 +17,49 @@
               <el-col :span="6" class="top2_left">
                 <div class="wrap_location">
                   <i class="el-icon-location"></i>
-                  <span class="location">吉林</span>
-                </div>
-                <el-col :span="8" class="location_map">
-                  <span class="location_name" v-for="(item, index) in locationList" :key="index">
-                    <el-link :underline="false" class="location_link" @click="clickName(index)" :class="{ location_active: nameIndex == index }">{{
-                      item.name
-                    }}</el-link>
-                  </span>
-                  <el-col :span="24" class="jd_location">
-                    <el-col :span="24" class="exclusive">
-                      <el-col :span="24" class="xian"></el-col>
-                      <div class="title">地区专享版本</div>
-                      <el-col :span="12"><el-link class="exclusive_link" :underline="false">中国港澳</el-link></el-col>
-                      <el-col :span="12"><el-link class="exclusive_link" :underline="false">中国台湾</el-link></el-col>
-                      <el-col :span="12"><el-link class="exclusive_link" :underline="false">京东全球</el-link></el-col>
-                    </el-col>
-                    <el-col :span="24" class="exclusive">
-                      <el-col :span="24" class="xian"></el-col>
-                      <div class="title">Available Sites</div>
-                      <el-col :span="12"
-                        ><el-link class="exclusive_link" :underline="false">
-                          <span class="exclusive_img img1"></span><span class="contry_name">Global Site</span>
-                        </el-link></el-col
-                      ><el-col :span="12"
-                        ><el-link class="exclusive_link" :underline="false">
-                          <span class="exclusive_img img2"></span><span class="contry_name">Global Site</span>
-                        </el-link></el-col
-                      ><el-col :span="12"
-                        ><el-link class="exclusive_link" :underline="false">
-                          <span class="exclusive_img img3"></span><span class="contry_name">Global Site</span>
-                        </el-link></el-col
-                      ><el-col :span="12"
-                        ><el-link class="exclusive_link" :underline="false">
-                          <span class="exclusive_img img4"></span><span class="contry_name">Global Site</span>
-                        </el-link></el-col
-                      ><el-col :span="12"
-                        ><el-link class="exclusive_link" :underline="false">
-                          <span class="exclusive_img img5"></span><span class="contry_name">Global Site</span>
-                        </el-link></el-col
-                      >
+                  <span class="location">{{ locationName }}</span>
+                  <el-col :span="8" class="location_map">
+                    <span class="location_name" v-for="(item, index) in locationList" :key="index">
+                      <el-link :underline="false" class="location_link" @click="clickName(index, item.name)" :class="{ location_active: nameIndex == index }">{{
+                        item.name
+                      }}</el-link>
+                    </span>
+                    <el-col :span="24" class="jd_location">
+                      <el-col :span="24" class="exclusive">
+                        <el-col :span="24" class="xian"></el-col>
+                        <div class="title">地区专享版本</div>
+                        <el-col :span="12"><el-link class="exclusive_link" :underline="false">中国港澳</el-link></el-col>
+                        <el-col :span="12"><el-link class="exclusive_link" :underline="false">中国台湾</el-link></el-col>
+                        <el-col :span="12"><el-link class="exclusive_link" :underline="false">京东全球</el-link></el-col>
+                      </el-col>
+                      <el-col :span="24" class="exclusive">
+                        <el-col :span="24" class="xian"></el-col>
+                        <div class="title">Available Sites</div>
+                        <el-col :span="12"
+                          ><el-link class="exclusive_link" :underline="false">
+                            <span class="exclusive_img img1"></span><span class="contry_name">Global Site</span>
+                          </el-link></el-col
+                        ><el-col :span="12"
+                          ><el-link class="exclusive_link" :underline="false">
+                            <span class="exclusive_img img2"></span><span class="contry_name">Global Site</span>
+                          </el-link></el-col
+                        ><el-col :span="12"
+                          ><el-link class="exclusive_link" :underline="false">
+                            <span class="exclusive_img img3"></span><span class="contry_name">Global Site</span>
+                          </el-link></el-col
+                        ><el-col :span="12"
+                          ><el-link class="exclusive_link" :underline="false">
+                            <span class="exclusive_img img4"></span><span class="contry_name">Global Site</span>
+                          </el-link></el-col
+                        ><el-col :span="12"
+                          ><el-link class="exclusive_link" :underline="false">
+                            <span class="exclusive_img img5"></span><span class="contry_name">Global Site</span>
+                          </el-link></el-col
+                        >
+                      </el-col>
                     </el-col>
                   </el-col>
-                </el-col>
+                </div>
               </el-col>
               <el-col :span="15" class="top2_right">
                 <el-col :span="5" class="to2_login">
@@ -132,9 +134,29 @@
                       <!-- </el-col> -->
                     </el-col>
                   </p>
-                  <p>
+                  <p class="phoneJd">
                     <span class="shu"></span>
                     <span class="menuName">手机京东</span>
+                    <el-col :span="3" class="er_code">
+                      <img src="../assets/er.png" style="width:100%;height: 100%;" />
+                      <i class="el-icon-caret-top"></i>
+                    </el-col>
+                    <el-col :span="9" class="code_con">
+                      <i class="el-icon-caret-top big"></i>
+                      <el-col :span="24" v-for="(item, index) in codeConList" :key="index" class="code_text">
+                        <el-image class="code_img" :src="item.url" style="width:100% height: 100%"></el-image>
+                        <el-col :span="12" class="code_choose">
+                          <p class="pp" style="font-weight:bold;color:#666">{{ item.title }}</p>
+                          <p class="pp" style="font-weight:bold;color:#666" v-if="item.website">{{ item.website }}</p>
+                          <p class="pp" style="color:#f10214;" v-if="item.con">{{ item.con }}</p>
+                          <p class="pp" v-if="item.iconImg">
+                            <el-link :underline="false" :href="item.iconUrl"></el-link>
+                            <el-link :underline="false" :href="item.iconUrl"></el-link>
+                            <el-link :underline="false" :href="item.iconUrl"></el-link>
+                          </p>
+                        </el-col>
+                      </el-col>
+                    </el-col>
                   </p>
                 </el-col>
               </el-col>
@@ -162,16 +184,15 @@
                   </el-col>
                   <el-col :span="24" class="searchLine">
                     <el-col :span="2" v-for="(item, index) in serachTextList" :key="index" class="search_text">
-                      <el-link :href="item.url" :underline="false">{{ item.text }}</el-link>
+                      <el-link :href="item.url" :underline="false" class="search_link">{{ item.text }}</el-link>
                     </el-col>
                   </el-col>
-                </el-col>
-                <el-col :span="24" class="serach_nav">
-                  <span>秒杀</span>
-                  <el-link v-for="(item, index) in searchNavList" :key="index" :href="item.url" :underline="false">{{ item.text }}</el-link>
+                  <el-col :span="24" class="serach_nav">
+                    <span class="seckill">秒杀</span>
+                    <el-link class="discount" v-for="(item, index) in searchNavList" :key="index" :href="item.url" :underline="false">{{ item.text }}</el-link>
+                  </el-col>
                 </el-col>
               </el-col>
-              <el-col :span="5"> </el-col>
             </div>
           </el-col>
         </el-row>
@@ -191,6 +212,7 @@ export default {
   components: {},
   data: function() {
     return {
+      locationName: '吉林',
       //地区名称
       locationList: [
         { name: '北京' },
@@ -201,6 +223,7 @@ export default {
         { name: '山西' },
         { name: '河南' },
         { name: '辽宁' },
+        { name: '吉林' },
         { name: '黑龙江' },
         { name: '内蒙古' },
         { name: '江苏' },
@@ -420,13 +443,50 @@ export default {
         { text: '京东国际', url: '' },
         { text: '京东金融', url: '' },
       ],
+      show: true,
+      //大的二维码内容
+      codeConList: [
+        {
+          url: require('../assets/er.png'),
+          iconImg: require('../assets/icon.png'),
+          iconUrl: '',
+          title: '手机京东',
+          con: '新人专享大礼包',
+        },
+        {
+          url: require('../assets/er3.png'),
+          title: '关注京东',
+          website: 'JD.COM',
+          con: '抢5元红包',
+        },
+        {
+          url: require('../assets/er2.png'),
+          iconImg: require('../assets/icon.png'),
+          iconUrl: '',
+          title: '京东金融客户端',
+          con: '新人专享大礼包',
+        },
+        {
+          url: require('../assets/er4.jpg'),
+          iconImg: require('../assets/icon.png'),
+          iconUrl: '',
+          title: '京东健康客户端',
+        },
+      ],
     };
   },
   created() {},
   methods: {
     //点击名字动态添加class
-    clickName(index) {
+    clickName(index, name) {
       this.nameIndex = index;
+      console.log(name);
+      this.locationName = name;
+    },
+    //top的关闭按钮
+    close() {
+      console.log('关闭');
+      this.show = !this.show;
     },
   },
   computed: {
@@ -440,11 +500,26 @@ export default {
   .top1 {
     background-color: rgb(248, 242, 242);
     // background-color: rgb(25, 74, 160);
-    position: relative;
+    // position: relative;
     .top1_img {
       background: url('../assets/top.webp');
       background-size: 100%;
       height: 80px;
+      position: relative;
+      .top1_close {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        top: 4px;
+        right: 3px;
+        color: #918d8d;
+        text-align: center;
+        background: black;
+        line-height: 20px;
+      }
+      .top1_close:hover {
+        cursor: pointer;
+      }
     }
   }
   .top2 {
@@ -468,6 +543,83 @@ export default {
           vertical-align: top;
           margin-left: 3px;
         }
+        .location_map {
+          width: 300px;
+          background-color: #fff;
+          box-sizing: border-box;
+          border: 1px solid #ccc;
+          padding: 10px;
+          position: absolute;
+          top: 29px;
+          left: 0px;
+          display: none;
+          z-index: 999;
+          .location_name {
+            display: inline-block;
+            width: 20%;
+            line-height: 24px;
+            box-sizing: border-box;
+            .location_link {
+              padding: 0px 8px;
+              font-size: 12px;
+              color: #666;
+              // background-color: red;
+            }
+            .location_link:hover {
+              background-color: #f4f4f4;
+              color: #e33333;
+              cursor: pointer;
+            }
+          }
+          .jd_location {
+            margin: 10px 0px 10px 10px;
+            .exclusive {
+              margin-top: 10px;
+              .xian {
+                width: 245px;
+                height: 1px;
+                background-color: #eee;
+              }
+              font-size: 12px;
+              color: #666;
+              .title {
+                margin: 9px 0px;
+              }
+              .exclusive_link {
+                font-size: 12px;
+                .exclusive_img {
+                  width: 17px;
+                  height: 14px;
+                  // background: red;
+                  display: inline-block;
+                  vertical-align: middle;
+                  // background-size: 17px auto;
+                  background-position: 0 0;
+                }
+                .img1 {
+                  background: url('../assets/contry.png');
+                }
+                .img2 {
+                  background: url(../assets/contry.png) no-repeat -17px 0px;
+                }
+                .img3 {
+                  background: url(../assets/contry.png) no-repeat 0px -14px;
+                }
+                .img4 {
+                  background: url(../assets/contry.png) no-repeat -36px 0px;
+                }
+                .img5 {
+                  background: url(../assets/contry.png) no-repeat -17px -14px;
+                }
+
+                .contry_name {
+                  vertical-align: middle;
+                  margin-left: 8px;
+                }
+              }
+            }
+          }
+        }
       }
       .wrap_location:hover {
         background-color: #ffffff;
@@ -475,7 +627,10 @@ export default {
         border-bottom: none;
         cursor: pointer;
       }
-      .wrap_location:hover + .location_map {
+      // .wrap_location:hover + .location_map {
+      //   display: block;
+      // }
+      .wrap_location:hover .location_map {
         display: block;
       }
       .wrap_location:hover::after {
@@ -488,82 +643,6 @@ export default {
         left: 0px;
         z-index: 22;
       }
-      .location_map {
-        width: 300px;
-        background-color: #f3efef;
-        box-sizing: border-box;
-        border: 1px solid #ccc;
-        padding: 10px;
-        position: absolute;
-        top: 29px;
-        left: 0px;
-        display: none;
-        .location_name {
-          display: inline-block;
-          width: 20%;
-          line-height: 24px;
-          box-sizing: border-box;
-          .location_link {
-            padding: 0px 8px;
-            font-size: 12px;
-            color: #666;
-            // background-color: red;
-          }
-          .location_link:hover {
-            background-color: #f4f4f4;
-            color: #e33333;
-            cursor: pointer;
-          }
-        }
-        .jd_location {
-          margin: 10px 0px 10px 10px;
-          .exclusive {
-            margin-top: 10px;
-            .xian {
-              width: 245px;
-              height: 1px;
-              background-color: #eee;
-            }
-            font-size: 12px;
-            color: #666;
-            .title {
-              margin: 9px 0px;
-            }
-            .exclusive_link {
-              font-size: 12px;
-              .exclusive_img {
-                width: 17px;
-                height: 14px;
-                // background: red;
-                display: inline-block;
-                vertical-align: middle;
-                // background-size: 17px auto;
-                background-position: 0 0;
-              }
-              .img1 {
-                background: url('../assets/contry.png');
-              }
-              .img2 {
-                background: url(../assets/contry.png) no-repeat -17px 0px;
-              }
-              .img3 {
-                background: url(../assets/contry.png) no-repeat 0px -14px;
-              }
-              .img4 {
-                background: url(../assets/contry.png) no-repeat -36px 0px;
-              }
-              .img5 {
-                background: url(../assets/contry.png) no-repeat -17px -14px;
-              }
-
-              .contry_name {
-                vertical-align: middle;
-                margin-left: 8px;
-              }
-            }
-          }
-        }
-      }
     }
     .top2_right {
       float: right;
@@ -586,7 +665,7 @@ export default {
             height: 10px;
             display: inline-block;
             background-color: #ccc;
-            margin: 0px 10px;
+            margin: 0px 12px;
             padding: 0px;
           }
           .menuName {
@@ -600,6 +679,89 @@ export default {
               margin-left: 1px;
             }
           }
+          .er_code {
+            width: 76px;
+            // height: 76px;
+            // background-color: #e1251b;
+            position: absolute;
+            top: 33px;
+            right: -18px;
+            z-index: 222;
+            padding: 5px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            .el-icon-caret-top {
+              position: absolute;
+              color: #fff;
+              top: -8px;
+              left: 30px;
+              font-size: 14px;
+            }
+          }
+          .code_con {
+            width: 190px;
+            // height: 120px;
+            border: 1px solid #e7e7e7;
+            background-color: #fff;
+            position: absolute;
+            top: 28px;
+            right: -18px;
+            display: block;
+            z-index: 333;
+            border-bottom: 1px solid #e7e7e7;
+            padding: 15px 0px 5px 5px;
+            line-height: 20px;
+            display: none;
+            .el-icon-caret-top.big {
+              position: absolute;
+              top: -13px;
+              left: 134px;
+              font-size: 18px;
+              color: #fff;
+            }
+            .code_text {
+              margin-bottom: 10px;
+              .code_img {
+                width: 74px;
+                height: 74px;
+                border: 1px solid #ccc;
+                float: left;
+              }
+              .code_choose {
+                .pp {
+                  line-height: 0px;
+                  margin-left: 5px;
+                }
+                .pp:last-child {
+                  .el-link {
+                    display: inline-block;
+                    width: 25px;
+                    height: 24px;
+                    margin-right: 2px;
+                    // background-color: green;
+                    background: url('../assets/icon.png');
+                    overflow: hidden;
+                  }
+                  .el-link:nth-child(1) {
+                    background-position: 0px 0px;
+                  }
+                  .el-link:nth-child(2) {
+                    background-position: 0px -25px;
+                  }
+                  .el-link:nth-child(3) {
+                    background-position: 0px 25px;
+                  }
+                }
+              }
+            }
+            .code_text:nth-child(4),
+            .code_text:nth-child(5) .code_choose {
+              .pp:last-child {
+                .el-link:last-child {
+                  display: none;
+                }
+              }
+            }
+          }
           .myJd {
             width: 280px;
             position: absolute;
@@ -610,6 +772,7 @@ export default {
             background-color: #ffffff;
             border-bottom: none;
             display: none;
+            z-index: 999;
             .myJd_text {
               border-bottom: 1px solid #ccc;
               padding: 10px;
@@ -644,6 +807,12 @@ export default {
             }
           }
         }
+        .phoneJd:hover .code_con {
+          display: block;
+        }
+        p:last-child:hover .code_con {
+          display: block;
+        }
         p:nth-child(1):hover .menuName,
         p:nth-child(2):hover .menuName,
         p:nth-child(3):hover .menuName {
@@ -741,38 +910,44 @@ export default {
         margin-right: 5px;
         text-align: center;
         color: #999;
-        /deep/.el-link:nth-child(1) .el-link--inner {
+        // /deep/.search_link:nth-child(1) {
+        //   background-color: green;
+        // }
+        /deep/.search_link:hover {
+          cursor: pointer;
           color: #e1251b;
         }
-        /deep/.el-link:hover {
-          cursor: pointer;
+      }
+      /deep/.search_text:nth-child(1) .search_link {
+        color: #e1251b;
+      }
+      .serach_nav {
+        margin-top: 20px;
+        font-size: 16px;
+        /deep/.discount {
+          margin: 0px 10px;
+          .el-link--inner {
+            font-size: 15px;
+          }
+        }
+        /deep/.discount:nth-child(2) .el-link--inner {
+          color: #e1251b;
+          font-weight: bold;
+        }
+        /deep/.discount:last-child {
+          margin-right: 0px;
+        }
+        .seckill {
+          font-size: 15px;
           color: #e1251b;
+          font-weight: bold;
+          margin-right: 10px;
         }
       }
-      // .search_text:nth-child(1) {
-      //   color: #e1251b;
-      // }
-      // .search_text:hover {
-      //   cursor: pointer;
-      //   color: #e1251b;
-      // }
-    }
-    .serach_nav {
     }
   }
 }
-.container .top1 ::after {
-  content: 'X';
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  top: 4px;
-  right: 83px;
-  background-color: rgba(0, 0, 0, 0.3);
-  color: #918d8d;
-  text-align: center;
-  line-height: 20px;
-}
+
 .location_active {
   color: #ffffff !important;
   background-color: #f10215 !important;