初步完成静态

web/src/assets/css/base.css

@@ -97,7 +97,7 @@ ul li {
   opacity: .7;
 }
 
-.el-image-viewer__next,
+/* .el-image-viewer__next,
 .el-image-viewer__prev {
   border: 2px solid #fff;
   background-color: transparent;
@@ -111,7 +111,7 @@ ul li {
 .el-image-viewer__actions {
   border: 2px solid #fff;
   background-color: transparent;
-}
+} */
 
 .el-image-viewer__actions__inner {
   cursor: pointer;

web/src/views/tab3/index.vue

@@ -9,7 +9,9 @@
           :key="item.id"
           @click="cutTab(item)"
         >
-          <p v-if="formData.type === item.type">◆&emsp;{{ item.name }}&emsp;◆</p>
+          <p v-if="formData.type === item.type">
+            ◆&emsp;{{ item.name }}&emsp;◆
+          </p>
           <p v-else>{{ item.name }}</p>
           <span> {{ item.biaoshi }} </span>
         </li>
@@ -375,6 +377,7 @@ export default {
     background: url("../../assets/img/tab3Tab.png");
     background-size: 100% 100%;
     ul {
+      padding-left: 40px;
       display: flex;
       height: 100%;
       align-items: center;
@@ -393,7 +396,7 @@ export default {
           margin-left: 50px;
           color: #fff !important;
         }
-        &>p{
+        & > p {
           text-align: center;
           width: 145px;
         }
@@ -644,6 +647,7 @@ export default {
       width: 800px;
       height: auto;
       video {
+        max-height: 90vh;
         vertical-align: top;
         width: 100%;
       }

web/src/views/tab4/index.vue

@@ -149,6 +149,7 @@ export default {
     background: url("../../assets/img/tab4Tab.png");
     background-size: 100% 100%;
     ul {
+      padding-left: 35px;
       display: flex;
       height: 100%;
       align-items: center;

web/src/views/tab6/list.vue

@@ -253,6 +253,7 @@ export default {
     background: url("../../assets/img/tab6Tab.png");
     background-size: 100% 100%;
     ul {
+      padding-left: 40px;
       display: flex;
       height: 100%;
       align-items: center;

web/src/views/tab6/look.vue

@@ -279,6 +279,7 @@ export default {
     background: url("../../assets/img/tab6Tab.png");
     background-size: 100% 100%;
     ul {
+      padding-left: 40px;
       display: flex;
       height: 100%;
       align-items: center;

web/src/views/tab7/index.vue

@@ -12,16 +12,18 @@
           placeholder="请输入您的姓名"
           v-model="name"
           maxlength="8"
+          show-word-limit
         >
         </el-input>
         <el-input
           style="margin-top: 10px"
           resize="none"
-          :rows="5"
+          :rows="4"
           type="textarea"
           placeholder="请写下您的留言"
           v-model="textarea"
-          maxlength="250"
+          maxlength="200"
+          show-word-limit
         >
         </el-input>
       </div>
@@ -58,14 +60,15 @@
         </div>
         <!-- 二级评论展示内容 -->
         <div class="commTow">
-          <p>
-            华夏儿女值得骄傲，文明的进步中华上下五千年历史文化源远文明的进步中华上下五千流长。
-          </p>
-          <div class="right_bottom">
-            来自：刘茜茜&emsp;的评论&emsp;2020-06-06&emsp;&emsp;18：20：20&emsp;<span
-              >更多评论</span
-            >
+          <div class="commTow_row" v-for="i in 3" :key="i">
+            <p>
+              华夏儿女值得骄傲，文明的进步中华上下五千年历史文化源远文明的进步中华上下五千流长。
+            </p>
+            <div class="right_bottom">
+              来自：刘茜茜&emsp;的评论&emsp;2020-06-06&emsp;18:20:20
+            </div>
           </div>
+          <div class="moreCom">更多评论</div>
         </div>
       </div>
       <div class="row">
@@ -90,6 +93,7 @@
             placeholder="请输入您的姓名"
             v-model="nameTow"
             maxlength="8"
+            show-word-limit
           >
           </el-input>
           <el-input
@@ -98,7 +102,8 @@
             type="textarea"
             placeholder="请写下您的评论"
             v-model="textareaTow"
-            maxlength="250"
+            maxlength="200"
+            show-word-limit
           >
           </el-input>
           <div class="inp_btn">
@@ -239,11 +244,15 @@ export default {
           font-size: 14px;
           height: auto;
           text-align: right;
-          & > span {
-            cursor: pointer;
-            &:hover {
-              color: #d4a84f;
-            }
+        }
+        .commTow_row {
+          margin-bottom: 12px;
+        }
+        .moreCom {
+          text-align: right;
+          cursor: pointer;
+          &:hover {
+            color: #d4a84f;
           }
         }
       }
@@ -254,6 +263,12 @@ export default {
         /deep/.el-textarea__inner {
           background-color: rgba(255, 255, 255, 0.6);
         }
+        /deep/.el-input__count-inner{
+          background-color: transparent;
+        }
+        /deep/.el-input__count{
+          background-color: transparent;
+        }
         position: relative;
         .sign {
           z-index: 100;
@@ -265,7 +280,7 @@ export default {
         .sign2 {
           top: 62px;
         }
-        .inp_btn{
+        .inp_btn {
           justify-content: start;
         }
       }