增加拍摄技巧

pc/src/page/service/temp/index.vue

@@ -3,6 +3,7 @@
     <div class="banner">
       <div class="container">
         <h1>{{$t('service.title')}}</h1>
+        <h-icon type="jiantou"  class="jiantou" />
         <ul>
           <li :class="{'is-active': $route.path === item.path}" v-for="item in listItem" :key="item.name" @click="$router.push(item.path)">{{ item.name }}</li>
         </ul>
@@ -93,20 +94,27 @@ export default {
 }
 .banner {
   width: 100%;
-  height: 290px;
+  height: 200px;
   background: url(~@/assets/images/refactor/appDownload/banner.jpg) no-repeat center center;
+  .container {
+    display: flex;
+    align-items: center;
+    .jiantou {
+      color: #707070;
+      margin: 0 26px;
+      transform: rotate(180deg);
+    }
+  }
   h1 {
     font-size: 40px;
     font-weight: normal;
-    padding-top: 107px;
     line-height: 50px;
-    margin-bottom: 30px;
   }
   ul {
     display: flex;
   }
   li {
-    padding: 0 30px;
+    margin-right: 33px;
     font-size: 16px;
     color: #909090;
     cursor: pointer;
@@ -119,7 +127,7 @@ export default {
     }
   }
 }
-  @media screen and (max-width: 1600px) {
+@media screen and (max-width: 1600px) {
   // .fix-layout{
   //   margin-right: auto!important;
   //   max-width: 900px!important;

pc/src/page/service/video.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="video-w">
     <div class="container">
-    <div class="setion" v-for="(item,i) in langVideoCourse" :key="i">
-      <p class="common-title">{{item.name}}</p>
-      <!-- <p class="b-label">{{item.sub}}</p> -->
-      <ul class="i-ul">
-        <li :class="{small: item.items.length > 2}" :style="{width:`${90/item.items.length*2}%`}" @click="itemHandle(sub)" v-for="(sub,idx) in item.items" :key="idx">
-          <div class="img-w">
-            <img class="li-img" :src="`${$cdn}course/img/${sub.code}.jpg`" alt="">
-            <div class="hover-item">
-              <img :src="`${$cdn}course/img/video_play@2x.png`" alt="">
-              <p>{{sub.name}}</p>
+      <ul class="setion">
+        <li class="common-title" :class="{'is-active': activeTab === i}" v-for="(item,i) in langVideoCourse" @click="activeTab=i" :key="i">{{item.name}}</li>
+      </ul>
+      <h-row class="i-ul" :gutter="20">
+        <h-col :span="langVideoCourse[activeTab].items.length > 2 ? 6 : 12"  v-for="(sub,idx) in langVideoCourse[activeTab].items" :key="idx">
+          <div class="i-li" :class="{small: langVideoCourse[activeTab].items.length > 2}" @click="itemHandle(sub)">
+            <div class="img-w">
+              <img class="li-img" :src="`${$cdn}course/img/${sub.code}.jpg`" alt="">
+              <div class="hover-item">
+                <img :src="`${$cdn}course/img/video-play.png`" alt="">
+                <p>{{sub.name}}</p>
+              </div>
             </div>
+            <p class="li-p" >{{sub.name}}</p>
           </div>
-          <p class="li-p" >{{sub.name}}<img class="bofang" :src="`${$cdn}course/img/video_play@2x.png`" alt=""></p>
-          
-        </li>
-      </ul>
-    </div>
+        </h-col>
+      </h-row>
   </div>
   </div>
 </template>
@@ -26,6 +26,7 @@
 import { mapState } from 'vuex'
 
 export default {
+
   computed: {
     ...mapState({
       language: state => state.language.current,
@@ -34,7 +35,7 @@ export default {
   },
   data () {
     return {
-
+      activeTab: 0
     }
   },
   methods: {
@@ -59,20 +60,52 @@ export default {
   .setion{
     margin: 0 0 0;
     padding-top: 86px;
-    .common-title{
+    display: flex;
+    .common-title {
       margin: 0;
+      padding-right: 34px;
+      margin-right: 32px;
+      position: relative;
+      font-weight: normal;
+      color: #909090;
+      cursor: pointer;
+      &.is-active {
+        color: #202020;
+        &::after {
+          display: block;
+        }
+      }
+      &::after {
+        display: none;
+      }
+      &:last-child {
+          &::before {
+          display: none;
+        }
+      }
+      &::before {
+        content: '';
+        display: block;
+        height: 33px;
+        width: 1px;
+        background: #909090;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
     }
-    .i-ul{
+  }
+  .i-ul{
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       width: 100%;
       margin-top: 64px;
-      li{
+      .i-li {
         position: relative;
-        max-width: 49%;
-        margin-top: 20px;
+        margin-bottom: 33px;
         background: #fff;
         .li-img{
           width: 100%;
@@ -113,12 +146,15 @@ export default {
           height: 100%;
           cursor: pointer;
           text-align: center;
-          padding-top: 100px;
+          // padding-top: 125px;
           transition: top 0.2s linear;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
           img {
             width: 70px;
             height: 70px;
-            margin: 0 auto;
+            margin: 0 auto 9px;
           }
           p {
             font-size: 40px;
@@ -141,19 +177,18 @@ export default {
             cursor: pointer;
           }
           .hover-item {
-            padding-top: 40px;
+            // padding-top: 50px;
             img {
               width: 50px;
               height: 50px;
             }
             p {
-              font-size: 20px;
+              font-size: 24px;
             }
           }
         }
       }
     }
-  }
 }
 
 </style>

pc/src/store/language/home_cn.js

@@ -260,7 +260,7 @@ export default {
         ]
       },
       {
-        name: '分段教学',
+        name: '功能教学',
         sub: '功能模块拆解分段学习',
         items: [
           {
@@ -296,6 +296,47 @@ export default {
             name: '上传分享'
           }
         ]
+      },
+      {
+        name: '拍摄技巧',
+        items: [
+          {
+            code: 'jiqiao-1',
+            name: '开箱指引'
+          },
+          {
+            code: 'jiqiao-2',
+            name: '连接设备'
+          },
+          {
+            code: 'jiqiao-3',
+            name: '场景拍摄'
+          },
+          {
+            code: 'jiqiao-4',
+            name: '路线规划'
+          },
+          {
+            code: 'jiqiao-5',
+            name: '关联点位'
+          },
+          {
+            code: 'jiqiao-6',
+            name: '球幕视频'
+          },
+          {
+            code: 'jiqiao-7',
+            name: '上传分享'
+          },
+          {
+            code: 'jiqiao-8',
+            name: '浏览场景'
+          },
+          {
+            code: 'jiqiao-9',
+            name: '多楼层拍摄'
+          }
+        ]
       }
     ]
   },