首页查询、展柜

src/assets/icons/svg/z_hot.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686983097021" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4679" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M989.9222626666667 444.3410103333334L580.1490096666668 34.909091333333336H119.41107066666666l870.511192 870.596525V444.3410103333334z" fill="" p-id="4680"></path><path d="M493.7399596666666 345.23927233333336l-32.726626-32.68008 63.282424-63.371637-65.454546-65.361454-63.282424 63.371636-32.727919-32.680081L516.2330506666667 60.89826233333335l32.727919 32.681374-61.895111 61.981737 65.454545 65.361455 61.895111-61.981737 32.72792 32.68008L493.7399596666666 345.23927233333336zM604.8452526666667 306.84703033333335c24.031677-24.064 50.614303-36.636444 79.751757-37.714748 29.134869-1.078303 55.240404 9.903838 78.314021 32.943839 21.950061 21.91903 32.323232 46.871273 31.120808 74.851555-1.202424 27.982869-13.257697 53.443232-36.167111 76.383677-23.901091 23.934707-50.253576 36.406303-79.057455 37.417374-28.806465 1.011071-54.480162-9.739636-77.02497-32.252121-22.016-21.986263-32.689131-47.067798-32.015515-75.245899 0.674909-28.179394 12.366869-53.638465 35.078465-76.383677z m36.196848 32.579232c-14.921697 14.943677-23.517091 30.756202-25.782303 47.437576-2.270384 16.68396 2.879354 31.297939 15.440162 43.843232 12.827152 12.806465 27.34804 18.232889 43.566545 16.270223 16.217212-1.960081 31.985778-10.608485 47.303111-25.947798 15.976727-15.998707 25.133253-32.109899 27.46699-48.332283 2.333737-16.219798-2.813414-30.637253-15.441454-43.247192-12.825859-12.807758-27.677737-18.133333-44.558222-15.972849-16.877899 2.157899-32.876606 10.808889-47.994829 25.949091zM940.0177776666667 537.5599193333333l-43.835475-43.770828-126.661818 126.841535-32.827475-32.780929 126.663112-126.841536-43.734627-43.672565 26.739071-26.777859 120.39499 120.226909-26.737778 26.775273z" fill="#FFFFFF" p-id="4681"></path></svg>
\ No newline at end of file

src/assets/styles/index.scss

@@ -5,6 +5,40 @@
 @import 'sidebar';
 @import 'btn';
 @import 'eladmin';
+@font-face{
+  font-family: Source Han Sans CN;
+  src: url("./font/SourceHanSansCN-Regular.otf");
+}
+@font-face{
+  font-family: PingFang SC;
+  src: url("./font/PingFang Regular.ttf");
+}
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius   : 4px;
+  background-color: #1961C5;
+  background-image: -webkit-linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.2) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.2) 50%,
+      rgba(255, 255, 255, 0.2) 75%,
+      transparent 75%,
+      transparent
+  );
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #ededed;
+  border-radius: 10px;
+}
 
 body {
   height: 100%;
@@ -23,6 +57,10 @@ html {
   box-sizing: border-box;
 }
 
+img {
+  -webkit-user-drag: none;
+}
+
 #app {
   height: 100%;
 }

src/components/Dict/index.js

@@ -19,6 +19,9 @@ const install = function(Vue) {
         new Dict(this.dict).init(this.$options.dicts, () => {
           this.$nextTick(() => {
             this.$emit('dictReady')
+            if (this.$options.methods && this.$options.methods.onDictReady instanceof Function) {
+              this.$options.methods.onDictReady.call(this, this.dict)
+            }
           })
         })
       }

src/main.js

@@ -14,6 +14,9 @@ import checkPer from '@/utils/permission'
 import permission from './components/Permission'
 import './assets/styles/element-variables.scss'
 
+// 节流标签
+import throttle from '@/utils/throttle'
+
 // global css
 import './assets/styles/index.scss'
 
@@ -27,6 +30,7 @@ import './router/index' // permission control
 Vue.use(checkPer)
 Vue.use(permission)
 Vue.use(dict)
+Vue.use(throttle)
 Vue.use(Element, {
   size: Cookies.get('size') || 'mini' // set element-ui default size
 })

src/utils/throttle.js

+export default {
+  install(Vue) {
+    Vue.directive('throttle', {
+      bind: (el, binding) => {
+        let throttleTime = binding.value // 防抖时间
+        if (!throttleTime) { // 用户若不设置防抖时间，则默认2s
+          throttleTime = 2000
+        }
+        let cbFun
+        el.addEventListener('click', event => {
+          if (!cbFun) { // 第一次执行
+            cbFun = setTimeout(() => {
+              cbFun = null
+            }, throttleTime)
+          } else {
+            event && event.stopImmediatePropagation()
+          }
+        }, true)
+      }
+    })
+  }
+}

src/views/backstage/contentMgt/homePage/add.vue

@@ -99,11 +99,6 @@
             <el-input v-model="formData.xxx" placeholder="单行输入" class="cell-input" />
           </div>
         </el-form-item>
-        <el-form-item label="产品ID：" class="form-cell" prop="xxx">
-          <div class="cell-box">
-            <el-input v-model="formData.xxx" placeholder="单行输入" class="cell-input" />
-          </div>
-        </el-form-item>
         <el-form-item label="产品分类：" class="form-cell" prop="xxx">
           <div class="cell-box">
             <el-select v-model="formData.xxx" placeholder="无" class="cell-select">
@@ -111,6 +106,11 @@
             </el-select>
           </div>
         </el-form-item>
+        <el-form-item label="产品ID：" class="form-cell" prop="xxx">
+          <div class="cell-box">
+            <el-input v-model="formData.xxx" placeholder="单行输入" class="cell-input" />
+          </div>
+        </el-form-item>
         <el-form-item label="产品运营名称：" class="form-cell" prop="xxx">
           <div class="cell-box">
             <el-input v-model="formData.xxx" placeholder="单行输入" class="cell-input" />

src/views/homepage/floatBtn.vue → src/views/homepage/components/floatBtn.vue

@@ -12,7 +12,7 @@
         <div class="line-s" />
         <div class="fixed-contact-popover">
           <div class="fixed-contact-popover-img">
-            <img src="../../assets/images/wxgz.jpg" alt="">
+            <img src="@/assets/home_images/wxgz.jpg" alt="">
           </div>
         </div>
       </li>
@@ -51,7 +51,7 @@ export default {
 .fixed-contact {
   position: fixed;
   left: inherit;
-  right: 4%;
+  right: 2vw;
   margin-left: 0;
   bottom: 200px;
   width: 76px;

src/views/homepage/components/languageSetting.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: #FFFFFF;
+  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: #1482f0;
+    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/searchPanel.vue

+<template>
+  <div class="search-box">
+    <div class="search-btn">
+      <el-input v-model="query.keyword" placeholder="请输入关键字" style="width: 600px" />
+      <el-select v-model="query.productType" placeholder="全部产品" style="width: 160px">
+        <el-option v-for="item in [{value:undefined,label:'全部产品'}, ...dict.product_type]" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-select v-model="query.area" placeholder="区域" style="width: 100px">
+        <el-option v-for="item in [{value:undefined,label:'区域'}, ...dict.area_province]" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-button icon="el-icon-search" class="btn">搜索</el-button>
+    </div>
+    <div class="search-keyword">
+      <span v-for="(item, index) in keywords" :key="index" class="label" @click="keywordClick(item, 'keyword')">{{ item }}</span>
+    </div>
+    <div class="search-keyword-title">
+      <div class="title">品牌</div>
+    </div>
+    <div class="search-keyword-label">
+      <span v-for="(item, index) in brands" :key="index" class="label" @click="keywordClick(item, 'brand')">{{ item }}</span>
+    </div>
+    <div class="search-keyword-title">
+      <div class="title">供应商</div>
+    </div>
+    <div class="search-keyword-label">
+      <span v-for="(item, index) in suppliers" :key="index" class="label" @click="keywordClick(item, 'supplier')">{{ item }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  dicts: ['product_type', 'area_province'],
+  data() {
+    return {
+      query: {},
+      keywords: ['曲线记录仪', '液位控制器', '双金属温度计', '位移传感器'],
+      brands: ['高领传感', '施克', '蓝之宇', '高领传感', '施克', '蓝之宇'],
+      suppliers: ['上海成渝智能科技发展有限公司', '山东盛茂科技有限公司', '山东天润科技有限公司']
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+
+    })
+  },
+  methods: {
+    keywordClick(item, type) {
+
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.search-box {
+  width: 100%;
+  text-align: center;
+  user-select: none;
+  .btn{
+    width: 100px;
+    height: 47px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    font-size: 16px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    background: rgba(101,103,113,0.35);
+    color: #FFFFFF;
+    opacity: 0.7;
+  }
+  .btn:hover {
+    opacity: 1;
+  }
+  >>>.el-input__inner {
+    height: 47px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+    font-size: 16px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    background: rgba(101,103,113,0.35);
+    color: #FFFFFF;
+    opacity: 0.7;
+  }
+  >>>.el-input__inner:hover {
+    opacity: 1;
+  }
+  .search-keyword {
+    margin-top: 2px;
+    text-align: left;
+    padding-left: 25vw;
+    .label {
+      padding: 1px 15px 1px;
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 35px;
+      cursor:pointer;
+      user-select: none;
+    }
+    .label:hover {
+      color: wheat;
+    }
+  }
+  .search-keyword-title {
+    display: flex;
+    justify-content: center;
+    margin-top: 40px;
+    font-size: 20px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #FFFFFF;
+    .title {
+      width: 126px;
+      padding: 7px;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 20px;
+    }
+  }
+  .search-keyword-label {
+    margin-top: 20px;
+    .label {
+      padding: 3px 25px 3px;
+      font-size: 20px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 35px;
+      cursor:pointer;
+      user-select: none;
+    }
+    .label:hover {
+      color: wheat;
+    }
+  }
+}
+</style>

src/views/homepage/components/titleMenus.vue

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

src/views/homepage/components/userLogin.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: #FFFFFF;
+  line-height: 48px;
+  opacity: 0.6;
+  cursor:pointer;
+  user-select: none;
+}
+</style>