优质产品

src/router/index.js

@@ -9,7 +9,7 @@ import { filterAsyncRouter } from '@/store/modules/permission'
 
 NProgress.configure({ showSpinner: false })// NProgress Configuration
 
-const whiteList = ['/login', '/backlogin', '/home']// 免登录路由白名单
+const whiteList = ['/login', '/backlogin', '/home', '/product']// 免登录路由白名单
 const backUrlList = ['/dashboard', '/system', '/monitor', '/sys-tools', '/backstage']// 后台路由
 
 router.beforeEach((to, from, next) => {

src/router/routers.js

@@ -44,6 +44,14 @@ export const constantRouterMap = [
     },
     hidden: true
   },
+  {
+    path: '/product',
+    meta: { title: '优质产品', noCache: true },
+    component: (resolve) => {
+      return require(['@/views/homepage/product/index'], resolve)
+    },
+    hidden: true
+  },
   {
     path: '/',
     component: Layout,

src/views/homepage/components/languageSettingV2.vue

+<template>
+  <div class="title-box">
+    <div class="text" @click="click">语言选择 <i v-if="visible" class="el-icon-sort" /><i v-else class="el-icon-arrow-down" />
+    </div>
+    <div class="select-box">
+      <ul v-show="visible">
+        <li v-for="(item,index) in languages" :key="index" :class="currentObj===item?'active':''" @click="choose(item,index)">
+          {{ item.label }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      languages: [{
+        value: 'CH',
+        label: '中文'
+      }, {
+        value: 'EN',
+        label: 'English'
+      }],
+      currentObj: {},
+      visible: false
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.currentObj = this.languages[0]
+    })
+  },
+  methods: {
+    click() {
+      this.visible = !this.visible
+    },
+    choose(item, index) {
+      this.visible = false
+      this.currentObj = item
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.title-box {
+  padding: 1px 15px 1px;
+  font-size: 20px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #666666;
+  line-height: 48px;
+  cursor: pointer;
+  user-select: none;
+}
+.select-box {
+  position: relative;
+  font-size: 16px;
+  line-height: 32px;
+  ul {
+    list-style: none;
+    margin: 0;
+    position: absolute;
+    padding-inline-start: 0;
+    background-color: #1c1e25;
+    width: 100%;
+    border: 1px solid #e4e4e4;
+    border-radius: 4px;
+    li {
+      padding: 0 10px;
+      text-align: center;
+      font-weight: 200;
+      color: #eee;
+    }
+    li:hover {
+      padding: 0 10px;
+      color: wheat;
+      background: rgba(255, 255, 255, 0.2);
+    }
+    .active {
+      font-weight: 600;
+      color: white;
+    }
+  }
+}
+</style>

src/views/homepage/components/titleMenusV2.vue

+<template>
+  <div class="menus-box">
+    <div v-for="(item, index) in menus" :key="index" class="menus-item" :class="currentMenuObj===item?'active':''" @click="menuClick(item)">
+      {{ item.name }}
+      <div v-if="currentMenuObj===item" class="menus-line"><div /></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    menuIndex: {
+      type: String,
+      default: '0'
+    }
+  },
+  data() {
+    return {
+      menus: [
+        { name: '首页', active: true }, { name: '优质产品' }, { name: '优质供应商' }, { name: '解决方案与服务' }, { name: '软件系统' }, { name: '专业培训' }, { name: '行业资讯' }, { name: '信息发布' }
+      ],
+      currentMenuObj: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.currentMenuObj = this.menus[this.menuIndex]
+    })
+  },
+  methods: {
+    menuClick(item) {
+      this.currentMenuObj = item
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.menus-box {
+  .menus-item {
+    position: relative;
+    display: inline-block;
+    padding: 0 15px;
+    font-size: 20px;
+    font-weight: 400;
+    font-family: Source Han Sans CN;
+    color: #666666;
+    cursor:pointer;
+    user-select: none;
+  }
+  .menus-item:hover {
+    color: #F7601A;
+  }
+  .active {
+    color: #000;
+    font-weight: 600;
+  }
+  .menus-line {
+    position: absolute;
+    top: 46px;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    padding: 0 15px;
+    div {
+      width: 100%;
+      height: 100%;
+      background: #1961C5;
+    }
+  }
+}
+</style>

src/views/homepage/components/userLoginV2.vue

+<template>
+  <div class="user-login-box">
+    <div v-if="!userObj" class="not-login" @click="login">注册/登录</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      userObj: null,
+      activatedMenu: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+
+    })
+  },
+  methods: {
+    login(item) {
+
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.user-login-box {
+  padding: 1px 15px 1px;
+  font-size: 20px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #000;
+  line-height: 48px;
+  opacity: 0.6;
+  cursor:pointer;
+  user-select: none;
+}
+.user-login-box:hover {
+  opacity: 0.85;
+}
+</style>

src/views/homepage/index.vue

@@ -584,9 +584,6 @@ export default {
     }
   }
 }
-.xxx {
-  height: 300px;
-}
 .head-box {
   width: 100vw;
   height: 750px;

src/views/homepage/product/index.vue

+<template>
+  <div class="page-body">
+    <div class="head-box">
+      <div class="head-box-top">
+        <div class="top-call" />
+        <div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
+        <div class="top-call"><title-menus ref="titleMenus" menu-index="1" style="padding-top: 15px" /></div>
+        <div class="top-call"><user-login ref="userLogin" /></div>
+        <div class="top-call"><language-setting ref="languageSetting" /></div>
+      </div>
+    </div>
+    <div class="content-box">
+      <div class="showcase">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item>xxx</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+    </div>
+    <div style="width:100vw;height: 100vh" />
+    <home-footer ref="homeFooter" />
+  </div>
+</template>
+<script>
+import titleMenus from '../components/titleMenusV2'
+import userLogin from '../components/userLoginV2'
+import languageSetting from '../components/languageSettingV2'
+import homeFooter from '../components/homeFooter'
+
+export default {
+  components: { titleMenus, userLogin, languageSetting, homeFooter },
+  dicts: ['product_type', 'area_province'],
+  data() {
+    return {
+      imgSrcStart: process.env.VUE_APP_BASE_API,
+      query: {},
+      currentProductTypeObj: null,
+      throttle: null, // 节流器
+      throttleTime: 300
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+
+    })
+  },
+  methods: {
+    onDictReady(dict) {
+      this.currentProductTypeObj = dict.product_type[0]
+    },
+    // 变更产品推送
+    changeProductPush(item) {
+      clearTimeout(this.throttle)
+      this.throttle = setTimeout(() => {
+        if (this.currentProductTypeObj === item) {
+          return
+        }
+        console.log(item)
+        this.currentProductTypeObj = item
+      }, this.throttleTime)
+    },
+    // 点击询价
+    inquiry(item, type) {
+      console.log(item, type)
+    },
+    // 点击收藏
+    storeShowcase(item, type) {
+      item.isStore = !item.isStore
+      console.log(item, type)
+    },
+    // 跳转到详情
+    goToDetails(item, type) {
+      console.log(item, type)
+    },
+    // 点击更多
+    moreTo(type) {
+      console.log(type)
+    },
+    goTop() {
+      document.body.scrollTop = 0
+      document.documentElement.scrollTop = 0
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.touch {
+  cursor:pointer;
+}
+.clear {
+  clear: both
+}
+.head-box {
+  width: 100vw;
+  top: 0;
+  position: fixed;
+  background: none repeat scroll 0 0 white;
+  z-index: 99;
+  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
+  .head-box-top {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    .top-call {
+      height: 80px;
+      padding-top: 15px;
+    }
+  }
+}
+.content-box {
+  display: flex;
+  justify-content: center;
+  margin-top: 90px;
+  user-select: none;
+  .showcase {
+    width: 90%;
+  }
+}
+</style>