|
|
@@ -0,0 +1,795 @@
|
|
|
+<template>
|
|
|
+ <div id="index">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="container">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="top1">
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col class="top1_img"> </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="top2">
|
|
|
+ <div class="w_1200">
|
|
|
+ <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
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="top2_right">
|
|
|
+ <el-col :span="5" class="to2_login">
|
|
|
+ <el-link :underline="false" class="hello">你好，请登录<span style="margin-left:5px;color:#f10215">免费注册</span></el-link>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="19" class="menu">
|
|
|
+ <p>
|
|
|
+ <span class="shu"></span>
|
|
|
+ <span class="menuName">我的订单</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="shu"></span>
|
|
|
+ <span class="menuName">我的京东 <i class="el-icon-arrow-down"></i></span>
|
|
|
+ <el-col :span="3" class="myJd">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="24" v-for="(item, index) in myJdList" :key="index" class="myJd_text">
|
|
|
+ <el-col :span="12" v-for="(val, index1) in item.con" :key="index1">
|
|
|
+ <el-link :underline="false" :href="val.url">
|
|
|
+ <span>{{ val.name }}</span>
|
|
|
+ </el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="shu"></span>
|
|
|
+ <span class="menuName">京东会员</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="shu"></span>
|
|
|
+ <span class="menuName">企业采购 <i class="el-icon-arrow-down"></i></span>
|
|
|
+ <el-col :span="3" class="myJd procur">
|
|
|
+ <el-col :span="24" class="myJd_text">
|
|
|
+ <el-col :span="12" v-for="(item, index) in procurList" :key="index">
|
|
|
+ <el-link :underline="false">{{ item.name }}</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="shu"></span>
|
|
|
+ <span class="menuName">客户服务<i class="el-icon-arrow-down"></i></span>
|
|
|
+ <el-col :span="3" class="myJd customer">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="24" v-for="(item, index) in customerList" :key="index" class="myJd_text">
|
|
|
+ <el-col :span="24" class="title">{{ item.title }}</el-col>
|
|
|
+ <el-col :span="12" v-for="(val, index1) in item.con" :key="index1">
|
|
|
+ <el-link :underline="false" :href="val.url">
|
|
|
+ <span>{{ val.name }}</span>
|
|
|
+ </el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="shu"></span>
|
|
|
+ <span class="menuName">网站导航<i class="el-icon-arrow-down"></i></span>
|
|
|
+ <el-col :span="24" class="myJd website">
|
|
|
+ <!-- <el-col :span="24"> -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6" v-for="(item, index) in websiteList" :key="index" class="myJd_text">
|
|
|
+ <el-col :span="24" class="title">{{ item.title }}</el-col>
|
|
|
+ <el-col :span="6" v-for="(val, index1) in item.con" :key="index1">
|
|
|
+ <el-link :underline="false" :href="val.url">
|
|
|
+ <span>{{ val.name }}</span>
|
|
|
+ </el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- </el-col> -->
|
|
|
+ </el-col>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="shu"></span>
|
|
|
+ <span class="menuName">手机京东</span>
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="top3">
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-link href="" :underline="false" class="top3_logo"> </el-link>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-col :span="24" class="search">
|
|
|
+ <!-- <el-col :span="18" class="search_left"> -->
|
|
|
+ <el-input class="search_left" placeholder="请输入内容" v-model="input3">
|
|
|
+ <i slot="append" class="el-icon-camera"></i>
|
|
|
+ <el-button slot="append" icon="el-icon-search"></el-button>
|
|
|
+ </el-input>
|
|
|
+ <!-- </el-col> -->
|
|
|
+ <el-col :span="6" class="cart">
|
|
|
+ <i class="el-icon-shopping-cart-2"></i>
|
|
|
+ <span>{{ num }}</span>
|
|
|
+ <span>我的购物车</span>
|
|
|
+ </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-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>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5"> </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+export default {
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ name: 'index',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ //地区名称
|
|
|
+ locationList: [
|
|
|
+ { name: '北京' },
|
|
|
+ { name: '上海' },
|
|
|
+ { name: '天津' },
|
|
|
+ { name: '重庆' },
|
|
|
+ { name: '河北' },
|
|
|
+ { name: '山西' },
|
|
|
+ { name: '河南' },
|
|
|
+ { name: '辽宁' },
|
|
|
+ { name: '黑龙江' },
|
|
|
+ { name: '内蒙古' },
|
|
|
+ { name: '江苏' },
|
|
|
+ { name: '山东' },
|
|
|
+ { name: '安徽' },
|
|
|
+ { name: '浙江' },
|
|
|
+ { name: '福建' },
|
|
|
+ { name: '湖北' },
|
|
|
+ { name: '湖南' },
|
|
|
+ { name: '广东' },
|
|
|
+ { name: '广西' },
|
|
|
+ { name: '江西' },
|
|
|
+ { name: '四川' },
|
|
|
+ { name: '海南' },
|
|
|
+ { name: '贵州' },
|
|
|
+ { name: '云南' },
|
|
|
+ { name: '西藏' },
|
|
|
+ { name: '陕西' },
|
|
|
+ { name: '甘肃' },
|
|
|
+ { name: '青海' },
|
|
|
+ { name: '宁夏' },
|
|
|
+ { name: '新疆' },
|
|
|
+ { name: '港澳' },
|
|
|
+ { name: '台湾' },
|
|
|
+ { name: '钓鱼岛' },
|
|
|
+ { name: '海外' },
|
|
|
+ ],
|
|
|
+ nameIndex: -1,
|
|
|
+ //导航菜单名称
|
|
|
+ // menuList: [
|
|
|
+ // { name: '我的订单' },
|
|
|
+ // { name: '我的京东' },
|
|
|
+ // { name: '京东会员' },
|
|
|
+ // { name: '企业采购' },
|
|
|
+ // { name: '客户服务' },
|
|
|
+ // { name: '网站导航' },
|
|
|
+ // { name: '手机京东' },
|
|
|
+ // ],
|
|
|
+ //我的京东
|
|
|
+ myJdList: [
|
|
|
+ {
|
|
|
+ con: [
|
|
|
+ { name: '待处理订单', url: '' },
|
|
|
+ { name: '消息', url: '' },
|
|
|
+ { name: '返修退换货', url: '' },
|
|
|
+ { name: '我的问答', url: '' },
|
|
|
+ { name: '降价商品', url: '' },
|
|
|
+ { name: '我的关注', url: '' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ con: [
|
|
|
+ { name: '我的京豆', url: '' },
|
|
|
+ { name: '我的优惠券', url: '' },
|
|
|
+ { name: '我的白条', url: '' },
|
|
|
+ { name: '我的理财', url: '' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ //企业采购
|
|
|
+ procurList: [
|
|
|
+ { name: '企业购' },
|
|
|
+ { name: '商用场景馆' },
|
|
|
+ { name: '工业品' },
|
|
|
+ { name: '丰客多商城' },
|
|
|
+ { name: '礼品卡' },
|
|
|
+ { name: '企业微信购' },
|
|
|
+ { name: '大中型企业采购' },
|
|
|
+ ],
|
|
|
+ //客户服务
|
|
|
+ customerList: [
|
|
|
+ {
|
|
|
+ title: '客户',
|
|
|
+ con: [
|
|
|
+ { name: '帮助中心', url: '' },
|
|
|
+ { name: '售后服务', url: '' },
|
|
|
+ { name: '在线客户', url: '' },
|
|
|
+ { name: '意见建议', url: '' },
|
|
|
+ { name: '电话客服', url: '' },
|
|
|
+ { name: '邮箱客服', url: '' },
|
|
|
+ { name: '金融资讯', url: '' },
|
|
|
+ { name: '全球售客服', url: '' },
|
|
|
+ { name: '企业客服', url: '' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '商户',
|
|
|
+ con: [
|
|
|
+ { name: '合作招商', url: '' },
|
|
|
+ { name: '成长中心', url: '' },
|
|
|
+ { name: '商家后台', url: '' },
|
|
|
+ { name: '京麦工作台', url: '' },
|
|
|
+ { name: '商家帮助', url: '' },
|
|
|
+ { name: '规则平台', url: '' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ //网站导航
|
|
|
+ websiteList: [
|
|
|
+ {
|
|
|
+ title: '特色主题',
|
|
|
+ con: [
|
|
|
+ { name: '新品首发', url: '' },
|
|
|
+ { name: '京东金融', url: '' },
|
|
|
+ { name: '全球售', url: '' },
|
|
|
+ { name: '国际站', url: '' },
|
|
|
+ { name: '京东会员', url: '' },
|
|
|
+ { name: '京东预售', url: '' },
|
|
|
+ { name: '台湾售', url: '' },
|
|
|
+ { name: '俄语站', url: '' },
|
|
|
+ { name: '装机大师', url: '' },
|
|
|
+ { name: '0元测评', url: '' },
|
|
|
+ { name: '港澳售', url: '' },
|
|
|
+ { name: '优惠券', url: '' },
|
|
|
+ { name: '秒杀', url: '' },
|
|
|
+ { name: '闪购', url: '' },
|
|
|
+ { name: '印尼站', url: '' },
|
|
|
+ { name: '陪伴计划', url: '' },
|
|
|
+ { name: '出海招商', url: '' },
|
|
|
+ { name: '拍拍二手', url: '' },
|
|
|
+ { name: '买什么', url: '' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '特色主题',
|
|
|
+ con: [
|
|
|
+ { name: '新品首发', url: '' },
|
|
|
+ { name: '京东金融', url: '' },
|
|
|
+ { name: '全球售', url: '' },
|
|
|
+ { name: '国际站', url: '' },
|
|
|
+ { name: '京东会员', url: '' },
|
|
|
+ { name: '京东预售', url: '' },
|
|
|
+ { name: '台湾售', url: '' },
|
|
|
+ { name: '俄语站', url: '' },
|
|
|
+ { name: '装机大师', url: '' },
|
|
|
+ { name: '0元测评', url: '' },
|
|
|
+ { name: '港澳售', url: '' },
|
|
|
+ { name: '优惠券', url: '' },
|
|
|
+ { name: '秒杀', url: '' },
|
|
|
+ { name: '闪购', url: '' },
|
|
|
+ { name: '印尼站', url: '' },
|
|
|
+ { name: '陪伴计划', url: '' },
|
|
|
+ { name: '出海招商', url: '' },
|
|
|
+ { name: '拍拍二手', url: '' },
|
|
|
+ { name: '买什么', url: '' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '特色主题',
|
|
|
+ con: [
|
|
|
+ { name: '新品首发', url: '' },
|
|
|
+ { name: '京东金融', url: '' },
|
|
|
+ { name: '全球售', url: '' },
|
|
|
+ { name: '国际站', url: '' },
|
|
|
+ { name: '京东会员', url: '' },
|
|
|
+ { name: '京东预售', url: '' },
|
|
|
+ { name: '台湾售', url: '' },
|
|
|
+ { name: '俄语站', url: '' },
|
|
|
+ { name: '装机大师', url: '' },
|
|
|
+ { name: '0元测评', url: '' },
|
|
|
+ { name: '港澳售', url: '' },
|
|
|
+ { name: '优惠券', url: '' },
|
|
|
+ { name: '秒杀', url: '' },
|
|
|
+ { name: '闪购', url: '' },
|
|
|
+ { name: '印尼站', url: '' },
|
|
|
+ { name: '陪伴计划', url: '' },
|
|
|
+ { name: '出海招商', url: '' },
|
|
|
+ { name: '拍拍二手', url: '' },
|
|
|
+ { name: '买什么', url: '' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '特色主题',
|
|
|
+ con: [
|
|
|
+ { name: '新品首发', url: '' },
|
|
|
+ { name: '京东金融', url: '' },
|
|
|
+ { name: '全球售', url: '' },
|
|
|
+ { name: '国际站', url: '' },
|
|
|
+ { name: '京东会员', url: '' },
|
|
|
+ { name: '京东预售', url: '' },
|
|
|
+ { name: '台湾售', url: '' },
|
|
|
+ { name: '俄语站', url: '' },
|
|
|
+ { name: '装机大师', url: '' },
|
|
|
+ { name: '0元测评', url: '' },
|
|
|
+ { name: '港澳售', url: '' },
|
|
|
+ { name: '优惠券', url: '' },
|
|
|
+ { name: '秒杀', url: '' },
|
|
|
+ { name: '闪购', url: '' },
|
|
|
+ { name: '印尼站', url: '' },
|
|
|
+ { name: '陪伴计划', url: '' },
|
|
|
+ { name: '出海招商', url: '' },
|
|
|
+ { name: '拍拍二手', url: '' },
|
|
|
+ { name: '买什么', url: '' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ input3: '',
|
|
|
+ num: 0,
|
|
|
+ serachTextList: [
|
|
|
+ { text: '音频巅峰日', url: '' },
|
|
|
+ { text: '家具换新', url: '' },
|
|
|
+ { text: '二手手机', url: '' },
|
|
|
+ { text: '音频巅峰日', url: '' },
|
|
|
+ { text: '家具换新', url: '' },
|
|
|
+ { text: '二手手机', url: '' },
|
|
|
+ { text: '音频巅峰日', url: '' },
|
|
|
+ { text: '家具换新', url: '' },
|
|
|
+ ],
|
|
|
+ searchNavList: [
|
|
|
+ { text: '优惠券', url: '' },
|
|
|
+ { text: 'plus会员', url: '' },
|
|
|
+ { text: '品牌闪购', url: '' },
|
|
|
+ { text: '拍卖', url: '' },
|
|
|
+ { text: '京东家电', url: '' },
|
|
|
+ { text: '京东超市', url: '' },
|
|
|
+ { text: '京东生鲜', url: '' },
|
|
|
+ { text: '京东国际', url: '' },
|
|
|
+ { text: '京东金融', url: '' },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ //点击名字动态添加class
|
|
|
+ clickName(index) {
|
|
|
+ this.nameIndex = index;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.container {
|
|
|
+ .top1 {
|
|
|
+ background-color: rgb(248, 242, 242);
|
|
|
+ // background-color: rgb(25, 74, 160);
|
|
|
+ position: relative;
|
|
|
+ .top1_img {
|
|
|
+ background: url('../assets/top.webp');
|
|
|
+ background-size: 100%;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top2 {
|
|
|
+ background-color: #e3e4e5;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 27px;
|
|
|
+ // line-height: 30px;
|
|
|
+ .top2_left {
|
|
|
+ position: relative;
|
|
|
+ .wrap_location {
|
|
|
+ width: 60px;
|
|
|
+ height: 30px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ position: relative;
|
|
|
+ .el-icon-location {
|
|
|
+ color: #f10215;
|
|
|
+ }
|
|
|
+ .location {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-left: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wrap_location:hover {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-bottom: none;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .wrap_location:hover + .location_map {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .wrap_location:hover::after {
|
|
|
+ content: '';
|
|
|
+ width: 62px;
|
|
|
+ height: 3px;
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 28px;
|
|
|
+ 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;
|
|
|
+ height: 30px;
|
|
|
+ .to2_login {
|
|
|
+ width: 127px;
|
|
|
+ margin-right: 5px;
|
|
|
+ /deep/.hello:hover {
|
|
|
+ color: #e33333;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .menu {
|
|
|
+ p {
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ font-size: 12px;
|
|
|
+ .shu {
|
|
|
+ width: 1px;
|
|
|
+ height: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ background-color: #ccc;
|
|
|
+ margin: 0px 10px;
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+ .menuName {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ margin-right: 2px;
|
|
|
+ .el-icon-arrow-down {
|
|
|
+ font-size: 12px;
|
|
|
+ transform: scale(0.63, 0.73);
|
|
|
+ color: #999999;
|
|
|
+ margin-left: 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .myJd {
|
|
|
+ width: 280px;
|
|
|
+ position: absolute;
|
|
|
+ top: 28px;
|
|
|
+ left: 9px;
|
|
|
+ font-size: 12px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: none;
|
|
|
+ display: none;
|
|
|
+ .myJd_text {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ /deep/.el-link--inner {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ /deep/.el-link--inner:hover {
|
|
|
+ color: #e33333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .procur.myJd {
|
|
|
+ width: 157px;
|
|
|
+ }
|
|
|
+ .customer.myJd {
|
|
|
+ width: 170px;
|
|
|
+ }
|
|
|
+ .myJd.website {
|
|
|
+ width: 1200px;
|
|
|
+ left: -984px;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ .myJd_text {
|
|
|
+ border: 0;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .myJd_text:last-child {
|
|
|
+ border-right: 0;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p:nth-child(1):hover .menuName,
|
|
|
+ p:nth-child(2):hover .menuName,
|
|
|
+ p:nth-child(3):hover .menuName {
|
|
|
+ color: #e33333;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ p:nth-child(2):hover .myJd {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ p:nth-child(4):hover .myJd.procur {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ p:nth-child(5):hover .myJd.customer {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ p:nth-child(6):hover .myJd.website {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ p:nth-child(4) .menuName {
|
|
|
+ color: #e33333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top3 {
|
|
|
+ background: #fff;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ padding: 10px 0px 5px 0px;
|
|
|
+ .top3_logo {
|
|
|
+ width: 134px;
|
|
|
+ height: 120px;
|
|
|
+ // height: 100px;
|
|
|
+ // background-color: #e33333;
|
|
|
+ background: url(../assets/jd_logo.png);
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ margin-top: 15px;
|
|
|
+ padding-left: 70px;
|
|
|
+ /deep/.search_left {
|
|
|
+ // height: 3px;
|
|
|
+ border: 2px solid #e2231a;
|
|
|
+ width: 539px;
|
|
|
+ margin-left: 40px;
|
|
|
+ position: relative;
|
|
|
+ /deep/.el-icon-camera {
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ right: 69px;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cart {
|
|
|
+ width: 130px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ height: 40px;
|
|
|
+ float: right;
|
|
|
+ line-height: 40px;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 10px;
|
|
|
+ .el-icon-shopping-cart-2 {
|
|
|
+ color: #e1251b;
|
|
|
+ font-size: 21px;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ font-weight: bolder;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ position: absolute;
|
|
|
+ top: 2px;
|
|
|
+ left: 24px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #e1251b;
|
|
|
+ }
|
|
|
+ span:nth-child(3) {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #e1251b;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cart:hover {
|
|
|
+ border: 1px solid #e1251b;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .searchLine {
|
|
|
+ margin-left: 40px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .search_text {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-right: 5px;
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
+ /deep/.el-link:nth-child(1) .el-link--inner {
|
|
|
+ color: #e1251b;
|
|
|
+ }
|
|
|
+ /deep/.el-link:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #e1251b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .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;
|
|
|
+}
|
|
|
+/deep/.el-link--inner {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+/deep/.el-input__inner {
|
|
|
+ border: 0;
|
|
|
+}
|
|
|
+/deep/.el-input-group__append {
|
|
|
+ border: 0;
|
|
|
+ background-color: #e1251b;
|
|
|
+ border-radius: 0px;
|
|
|
+}
|
|
|
+/deep/.el-icon-search {
|
|
|
+ font-weight: bolder;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
