TBtools-首页改版

htmldev/TBTools/src/App.vue

@@ -5,6 +5,16 @@
 </template>
 
 <script>
-  export default {
+import { mapActions } from 'vuex'
+
+export default {
+  created () {
+    this.getWebConfig()
+  },
+  methods: {
+    ...mapActions({
+      getWebConfig: 'common/getWebConfig'
+    })
   }
+}
 </script>

htmldev/TBTools/src/router/index.js

@@ -156,7 +156,7 @@ const mainRoutes = {
     // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
     { path: '/login', component: _import('modules/account/login'), name: 'login', meta: { title: '登录' } },
     { path: '/register', component: _import('modules/account/register'), name: 'register', meta: { title: '注册' } },
-    { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
+    { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页', isTab: true } },
     ...toolsRoutes,
     ...mineRoutes
   ]

htmldev/TBTools/src/store/modules/common.js

@@ -1,3 +1,6 @@
+import httpRequest from '@/utils/httpRequest'
+import { Message } from 'element-ui'
+
 export default {
   namespaced: true,
   state: {
@@ -16,7 +19,25 @@ export default {
     contentIsNeedRefresh: false,
     // 主入口标签页
     mainTabs: [],
-    mainTabsActiveName: ''
+    mainTabsActiveName: '',
+    webConfig: {}
+  },
+  actions: {
+    getWebConfig ({ commit }) {
+      httpRequest({
+        url: httpRequest.adornUrl('/web/config'),
+        method: 'get',
+        params: httpRequest.adornParams({})
+      }).then(({ data }) => {
+        if (data.status) {
+          commit('updateWebConfig', data.data)
+        } else {
+          Message.error({
+            message: data.msg
+          })
+        }
+      })
+    }
   },
   mutations: {
     updateDocumentClientHeight (state, height) {
@@ -45,6 +66,9 @@ export default {
     },
     updateMainTabsActiveName (state, name) {
       state.mainTabsActiveName = name
+    },
+    updateWebConfig (state, data) {
+      state.webConfig = data
     }
   }
 }

htmldev/TBTools/src/views/common/home.vue

@@ -1,28 +1,265 @@
 <template>
-  <div class="mod-home">
-    <img class="img-welcome" src="../../../static/img/welcome.png" alt="">
-  </div>
+  <el-row>
+    <el-col v-if="webConfig.siteBanner">
+      <el-carousel trigger="click" height="645px">
+        <el-carousel-item v-for="(item, index) in webConfig.siteBanner" :key="index">
+          <router-link :to="{name: 'register'}">
+            <img class="TT-banner" :src="item" alt="">
+          </router-link>
+        </el-carousel-item>
+      </el-carousel>
+    </el-col>
+    <el-col class="TT-core-funtion">
+      <h2>核心功能</h2>
+      <h3>CORE FUNTION</h3>
+      <p>核心自定义功能，满足不同的店铺需求，多方式提升打造店铺！</p>
+      <ul>
+        <li v-for="(item, index) in coreFuntion" :key="index">
+          <router-link :to="{name: item.name}">
+            <img :src="item.icon" alt="">
+            <p>{{ item.label }}</p>
+          </router-link>
+        </li>
+      </ul>
+    </el-col>
+    <el-col class="TT-superiority">
+      <h2>特色功能</h2>
+      <h3>SUPERIORITY</h3>
+      <p>商家多渠道打造爆款，提升店铺排名，销售才会来不停！</p>
+      <ul>
+        <li v-for="(item, index) in superiority" :key="index">
+          <router-link :to="{name: item.name}">
+            <img :src="item.icon" alt="">
+            <p>{{ item.label }}</p>
+          </router-link>
+        </li>
+      </ul>
+      <router-link class="btn-register" :to="{name: 'register'}">立即注册</router-link>
+    </el-col>
+    <el-col class="TT-copyright">©2020 Baidu (京)-经营性-2017-0020京公网安备11000002000</el-col>
+  </el-row>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   data () {
     return {
-      input: ''
+      coreFuntion: [
+        {
+          icon: require('../../../static/img/home/core_icon_0.png'),
+          label: '竞品透析',
+          name: 'toolsAnalyze'
+        },
+        {
+          icon: require('../../../static/img/home/core_icon_1.png'),
+          label: '旺旺透视',
+          name: 'toolsCredit'
+        },
+        {
+          icon: require('../../../static/img/home/core_icon_2.png'),
+          label: '指数转换',
+          name: 'toolsOnline'
+        },
+        {
+          icon: require('../../../static/img/home/core_icon_3.png'),
+          label: '价格走势',
+          name: 'toolsPricetrend'
+        },
+        {
+          icon: require('../../../static/img/home/core_icon_4.png'),
+          label: '淘宝订单查询',
+          name: 'toolsOrdersearch'
+        },
+        {
+          icon: require('../../../static/img/home/core_icon_5.png'),
+          label: '淘宝下拉框选词',
+          name: 'toolsStarkeysearch'
+        }
+      ],
+      superiority: [
+        {
+          icon: require('../../../static/img/home/superiority_icon_0.png'),
+          label: '店铺信息查询',
+          name: 'toolsShopinfo'
+        },
+        {
+          icon: require('../../../static/img/home/superiority_icon_1.png'),
+          label: '商品评论查询',
+          name: 'toolsFeedback'
+        },
+        {
+          icon: require('../../../static/img/home/superiority_icon_2.png'),
+          label: '商品信息查询',
+          name: 'toolsProductinfo'
+        },
+        {
+          icon: require('../../../static/img/home/superiority_icon_3.png'),
+          label: '商品问大家',
+          name: 'toolsProductaskinfo'
+        }
+      ]
     }
+  },
+  computed: {
+    ...mapState({
+      webConfig: state => state.common.webConfig
+    })
   }
 }
 </script>
 
-<style>
-.mod-home {
+<style lang="scss" scoped>
+/deep/ .el-col-24 {
+  .el-carousel__indicators--horizontal {
+    bottom: 10px;
+  }
 }
 
-.img-welcome {
+.TT-banner {
   display: block;
   width: 100%;
-  height: auto;
-  margin: 0 auto;
+}
+
+h2,
+h3 {
+  line-height: 43px;
+  font-size: 31px;
+}
+
+h2 {
+  color: #333;
+}
+
+h3 {
+  font-weight: 400;
+  color: #F0F0F0;
+}
+
+h3 + p {
+  margin-top: 6px;
+  font-size: 17px;
+  color: #BBBBBB;
+}
+
+.TT-core-funtion {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 60px 0 43px;
+
+  ul {
+    display: flex;
+    flex-flow: row wrap;
+    width: 634px;
+    margin-top: 26px;
+
+    li {
+      margin-left: 56px;
+      margin-bottom: 17px;
+
+      &:nth-of-type(3n+1) {
+        margin-left: 0;
+      }
+
+      a {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 174px;
+        height: 174px;
+        border-radius: 50%;
+        background: #F7F7F7;
+        text-decoration: none;
+      }
+
+      img {
+        width: 55px;
+        height: 55px;
+      }
+
+      p {
+        margin-top: 15px;
+        line-height: 23px;
+        font-size: 17px;
+        color: #333;
+      }
+    }
+  }
+}
+
+.TT-superiority {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 59px 0 77px;
+  background: url("../../../static/img/home/footer.png") center top/100% 100% no-repeat;
+
+  h2 {
+    color: #fff;
+  }
+
+  ul {
+    display: flex;
+    margin-top: 74px;
+
+    li {
+      margin-left: 140px;
+
+      &:nth-of-type(1) {
+        margin-left: 0;
+      }
+
+      a {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
+      img {
+        display: block;
+        width: 74px;
+        height: 74px;
+      }
+
+      p {
+        margin-top: 16px;
+        line-height: 23px;
+        font-size: 17px;
+        color: #fff;
+      }
+    }
+  }
+
+  .btn-register {
+    width: 113px;
+    height: 41px;
+    margin-top: 74px;
+    border-radius: 4px;
+    line-height: 41px;
+    font-size: 18px;
+    font-weight: 600;
+    text-align: center;
+    text-decoration: none;
+    color: #332C2B;
+    background: #00EEFF;
+  }
+}
+
+.TT-copyright {
+  width: 100%;
+  padding: 21px 0;
+  line-height: 16px;
+  font-size: 11px;
+  font-weight: 400;
+  text-align: center;
+  color: #FFFFFF;
+  background: #332C2B;
 }
 </style>
 

htmldev/TBTools/src/views/main-content.vue

@@ -95,5 +95,14 @@ export default {
 <style lang="scss" scoped>
 .site-content--tabs {
   padding: 0;
+
+  /deep/ .el-card {
+    border-radius: 0;
+    border: none;
+
+    .el-card__body {
+      padding: 0;
+    }
+  }
 }
 </style>

htmldev/TBTools/src/views/main-navbar.vue

@@ -4,15 +4,15 @@
       <ul class="TT-nav">
         <li>
           <router-link :to="{name: 'home'}">
-            <img class="logo" src="../../static/img/logo.png" alt="">
+            <img class="logo" :src="webConfig.siteLogUrl" alt="">
           </router-link>
         </li>
         <li>
           <router-link :to="{name: 'home'}">首页</router-link>
         </li>
         <li>
-          <el-dropdown class="TT-login" :show-timeout="0" placement="bottom" style="cursor: pointer;">
-            <span class="el-dropdown-link">参猫</span>
+          <el-dropdown :show-timeout="0" placement="bottom" style="cursor: pointer;">
+            <span class="el-dropdown-link">淘宝工具</span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item v-for="item in toolsRoutes" :key="item.name">
                 <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
@@ -25,7 +25,7 @@
         </li>
       </ul>
       <template v-if="token">
-        <el-dropdown class="TT-login" :show-timeout="0" placement="bottom" style="cursor: pointer;">
+        <el-dropdown :show-timeout="0" placement="bottom" style="cursor: pointer;">
           <span class="el-dropdown-link">我的</span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>
@@ -37,8 +37,8 @@
         </el-dropdown>
       </template>
       <template v-else>
-        <router-link :to="{name: 'login'}" replace>登录</router-link>
-        <router-link :to="{name: 'register'}" replace>/注册</router-link>
+        <router-link class="btn-login" :to="{name: 'login'}" replace>登录</router-link>
+        <router-link class="btn-register" :to="{name: 'register'}" replace>注册</router-link>
       </template>
     </div>
     <!-- 弹窗, 修改密码 -->
@@ -51,6 +51,7 @@ import UpdatePassword from './main-navbar-update-password'
 import { clearLoginInfo } from '@/utils'
 import Vue from 'vue'
 import { toolsRoutes } from '../router'
+import { mapState } from 'vuex'
 
 export default {
   components: {
@@ -63,6 +64,9 @@ export default {
     }
   },
   computed: {
+    ...mapState({
+      webConfig: state => state.common.webConfig
+    }),
     token () {
       return this.$store.state.user.token || Vue.cookie.get('token')
     }
@@ -121,16 +125,45 @@ export default {
 
     .logo {
       display: block;
-      width: 134px;
-      height: 50px;
+      width: 86px;
+      height: 32px;
     }
   }
 }
 
+.el-dropdown-link {
+  font-size: 16px;
+  color: #666;
+}
+
 a {
   display: block;
   font-size: 16px;
   color: #666;
   text-decoration: none;
 }
+
+.btn-login,
+.btn-register {
+  width: 70px;
+  height: 30px;
+  border-radius: 4px;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  text-align: center;
+}
+
+.btn-login {
+  line-height: 30px;
+  color: #00EEFF;
+  background: #332C2B;
+}
+
+.btn-register {
+  margin-left: 16px;
+  border: 1px solid #332C2B;
+  line-height: 28px;
+  color: #666666;
+}
 </style>

htmldev/TBTools/src/views/main.vue

@@ -86,3 +86,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.site-content__wrapper {
+  padding-top: 60px;
+}
+</style>