实现封面选择窗口的新版本样式

src/components/tableSelect2.vue

@@ -1,55 +1,61 @@
 <template>
-  <div class="select-commodity">
-    <a class="close" @click="$emit('cancle')">+</a>
-    <h3 class="title">{{title}}</h3>
+  <div class="table-select">
+    <span class="title">{{title}}</span>
+    <div class="close-btn"><i class="iconfont icon-pop-ups_shut-down" @click="$emit('cancle')"></i></div>
 
     <div class="material-tab">
-      <button class="material-tab-item" @click="currentMaterialType = 'image'">图片</button>
-      <button class="material-tab-item" @click="currentMaterialType = 'pano'">全景图</button>
-      <button class="material-tab-item" @click="currentMaterialType = '3D'">三维场景</button>
+      <a class="material-tab-item" @click.prevent="currentMaterialType = 'image'">
+        <span class="text">图片</span>
+        <div v-if="currentMaterialType === 'image'" class="bottom-line"></div>
+      </a>
+      <a class="material-tab-item" @click.prevent="currentMaterialType = 'pano'">
+        <span class="text">全景图</span>
+        <div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
+      </a>
+      <a class="material-tab-item" @click.prevent="currentMaterialType = '3D'">
+        <span class="text">三维场景</span>
+        <div v-if="currentMaterialType === '3D'" class="bottom-line"></div>
+      </a>
     </div>
     
-    <div class="filtert">
-      <div>
-        <input type="text" placeholder="输入关键词" v-model="searchKey"/>
-        <i v-if="!searchKey" class="iconfont iconsearch"/>
-        <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
-      </div>
+    <div class="filter">
+      <input type="text" placeholder="输入关键词" v-model="searchKey"/>
+      <i v-if="!searchKey" class="iconfont icon-editor_search search-icon"/>
+      <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red clear-icon"></i>
     </div>
 
-    <table v-show="currentMaterialType === 'image'">
-      <thead>
-        <tr>
-          <th></th>
-          <th v-for="(item,i) in tableHeadersForImage" :key="i">{{item.name}}</th>
-        </tr>
-      </thead>
-      <br/>
-      <tbody
-        class="data"
+    <div class="table" v-show="currentMaterialType === 'image'">
+      <div class="table-head-row">
+        <span class="table-head">1</span>
+        <span class="table-head" v-for="(item,i) in tableHeadersForImage" :key="i">{{item.name}}</span>
+      </div>
+      <div
+        class="table-body"
         v-infinite-scroll="requestMoreImageData"
         :infinite-scroll-disabled="!hasMoreImageData || isRequestingMoreImageData"
       >
-        <tr v-for="(item,i) in imageList" :key="i">
-          <td>
+        <div class="table-body-row" v-for="(item,i) in imageList" :key="i">
+          <span class="table-data">
             <div class="checkbox">
-              <input type="checkbox" @change="e => selectItem(item, e.target)"
-                :checked="select.some(i => i[primaryKey] === item[primaryKey])">
-              <span></span>
+              <!-- 负责功能 -->
+              <input
+                type="checkbox"
+                @change="e => selectItem(item, e.target)"
+                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
+              >
+              <!-- 负责外观 -->
+              <span class="for-outer-circle"></span>
+              <span class="for-inner-circle"></span>
             </div>
-          </td>
-          <td v-for="(sub,idx) in tableHeadersForImage" :key="idx">
-            <div v-if="sub.type === 'image'" class="list-img">
+          </span>
+          <span class="table-data" v-for="(sub,idx) in tableHeadersForImage" :key="idx">
+            <div v-if="sub.type=='image'" class="list-img">
               <img :src="item[sub.key] + `?x-oss-process=image/resize,p_10&${Math.random()}`" alt="">
             </div>
-            <div class="audio" v-else-if="sub.type === 'audio'">
-              <v-audio :vkey="item.id" :idleft="`_${$randomWord(true,8,8)}`" :idright="`_${$randomWord(true,8,8)}`"
-                :myAudioUrl="item[sub.key]"></v-audio>
-            </div>
             <span class="ellipsis" v-else>{{ item[sub.key] }}</span>
-          </td>
-        </tr>
-      </tbody>
+          </span>
+        </div>
+      </div>
       <!-- 无数据时的提示 -->
       <tbody v-if="imageList.length === 0 && !hasMoreImageData">
         <tr>
@@ -62,41 +68,40 @@
           </td>
         </tr>
       </tbody>
-    </table>
+    </div>
 
-    <table v-show="currentMaterialType === 'pano'">
-      <thead>
-        <tr>
-          <th></th>
-          <th v-for="(item,i) in tableHeadersForPano" :key="i">{{item.name}}</th>
-        </tr>
-      </thead>
-      <br/>
-      <tbody
-        class="data"
+    <div class="table" v-show="currentMaterialType === 'pano'">
+      <div class="table-head-row">
+        <span class="table-head">1</span>
+        <span class="table-head" v-for="(item,i) in tableHeadersForPano" :key="i">{{item.name}}</span>
+      </div>
+      <div
+        class="table-body"
         v-infinite-scroll="requestMorePanoData"
         :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
       >
-        <tr v-for="(item,i) in panoList" :key="i">
-          <td>
+        <div class="table-body-row" v-for="(item,i) in panoList" :key="i">
+          <span class="table-data">
             <div class="checkbox">
-              <input type="checkbox" @change="e => selectItem(item, e.target)"
-                :checked="select.some(i => i[primaryKey] === item[primaryKey])">
-              <span></span>
+              <!-- 负责功能 -->
+              <input
+                type="checkbox"
+                @change="e => selectItem(item, e.target)"
+                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
+              >
+              <!-- 负责外观 -->
+              <span class="for-outer-circle"></span>
+              <span class="for-inner-circle"></span>
             </div>
-          </td>
-          <td v-for="(sub,idx) in tableHeadersForPano" :key="idx">
+          </span>
+          <span class="table-data" v-for="(sub,idx) in tableHeadersForPano" :key="idx">
             <div v-if="sub.type=='image'" class="list-img">
               <img :src="item[sub.key] + `?x-oss-process=image/resize,p_10&${Math.random()}`" alt="">
             </div>
-            <div class="audio" v-else-if="sub.type=='audio'">
-              <v-audio :vkey="item.id" :idleft="`_${$randomWord(true,8,8)}`" :idright="`_${$randomWord(true,8,8)}`"
-                :myAudioUrl="item[sub.key]"></v-audio>
-            </div>
             <span class="ellipsis" v-else>{{item[sub.key]}}</span>
-          </td>
-        </tr>
-      </tbody>
+          </span>
+        </div>
+      </div>
       <!-- 无数据时的提示 -->
       <tbody v-if="panoList.length === 0 && !hasMorePanoData">
         <tr>
@@ -109,7 +114,7 @@
           </td>
         </tr>
       </tbody>
-    </table>
+    </div>
 
     <div class="btns">
       <a @click="$emit('cancle')">取消</a>
@@ -177,7 +182,7 @@ export default {
       searchKey:'', // 搜索关键词
       lastestUsedSearchKey: '',
 
-      currentMaterialType: 'pano',
+      currentMaterialType: 'image',
       
       isRequestingMoreImageData: false,
       isRequestingMorePanoData: false,
@@ -276,11 +281,16 @@ export default {
 </script>
 
 <style lang="less" scoped>
-::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
-    border-radius: 4px;
-    background: #fff;
+::-webkit-scrollbar { width: 6px; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+::-webkit-scrollbar-thumb {
+  background: #47484A;
+  border-radius: 3px;
 }
+::-webkit-scrollbar-button { background-color: none; height: 0; }
+::-webkit-scrollbar-track { background: transparent; border-radius: 6px; }
+::-webkit-scrollbar-corner { background: transparent; border-radius: 6px; }
+::-webkit-scrollbar-resizer { background: transparent;}
+
 .ellipsis{
   text-overflow: ellipsis;
   overflow: hidden;
@@ -288,134 +298,182 @@ export default {
   max-width: 200px;
   display: inline-block;
 }
-.select-commodity {
+
+.table-select {
   position: absolute;
   z-index: 3;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
-  color: #202020;
-  background: #FFFFFF;
-  max-width: 960px;
-  width: 100%;
-  border-radius: 6px;
-}
-
-.select-commodity > * {
-  padding: 15px;
+  width: 600px;
+  height: 730px;
+  background: #1A1B1D;
+  border-radius: 4px;
+  border: 1px solid #404040;
+  padding: 26px;
 }
 
 .title {
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 400;
-  margin: 0;
-  font-weight: bold;
-  border-bottom: 1px solid rgba(255,255,255,0.3);
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.6);
 }
 
-.close {
+.close-btn {
+  display: inline-block;
   position: absolute;
-  right: -8px;
-  top: -15px;
-  font-size: 25px;
-  color: #909090;
-  transform: rotate(45deg);
+  top: 26px;
+  right: 20px;
+  font-size: 12px;
+  color: #969799;
   cursor: pointer;
+  padding: 6px;
 }
 
-.filtert {
-  padding: 15px;
-}
-
-.filtert > div {
-  width: 210px;
-  height: 34px;
-  background: rgba(22,26,26,1);
-  border-radius: 2px;
-  display: inline-block;
-  margin-right: 10px;
-  position: relative;
-  vertical-align: middle;
+.material-tab {
+  margin-top: 35px;
+  > .material-tab-item {
+    display: inline-block;
+    margin-right: 20px;
+    position: relative;
+    cursor: pointer;
+    > .text {
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: rgba(255, 255, 255, 0.6);
+    }
+    > .bottom-line {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -4px;
+      width: 16px;
+      height: 2px;
+      background: #0076F6;
+      border-radius: 1px;
+    }
+  }
 }
 
-.filtert > div > select,
-.filtert > div > input {
-  box-sizing: border-box;
+.filter {
+  margin-top: 28px;
   width: 100%;
-  height: 100%;
-  border: none;
-  background: none;
-  color: #202020;
-  padding: 8px 10px;
-  outline: none;
-  background: #FFFFFF;
-  border: 1px solid #EBEBEB;
-}
-
-.filtert > div > input {
-  padding-right: 40px;
-}
-
-.filtert > div > i {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 10px;
-  cursor: pointer;
-  color:@color;
-}
-
-.scene-layer {
-  min-height: 400px;
-  max-height: 60vh;
-  overflow-y: auto;
+  height: 36px;
+  background: #252526;
+  border-radius: 2px;
+  border: 1px solid #404040;
   position: relative;
-  .nodata{
+  > input {
+    box-sizing: border-box;
+    width: calc(100% - 42px);
+    height: 100%;
+    border: none;
+    padding-left: 16px;
+    background: transparent;
+    color: #fff;
+    outline: none;
+  }
+  > .search-icon {
     position: absolute;
-    left: 50%;
     top: 50%;
-    transform: translate(-50%,-50%);
+    transform: translateY(-50%);
+    right: 18px;
+    color: #404040;
+    font-size: 20px;
+  }
+  > .clear-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 18px;
+    color: #404040;
+    font-size: 20px;
+    cursor: pointer;
   }
 }
 
-table {
-  border-collapse: collapse;
+@table-height: 440px;
+@table-head-row-height: 40px;
+@table-border-size: 1px;
+
+.table {
+  margin-top: 20px;
+  border: @table-border-size solid #404040;
+  background: #1A1B1D;
   width: 100%;
-  > thead {
-    display: inline-block;
+  height: @table-height;
+  > .table-head-row {
     width: 100%;
-    > tr > th {
-      font-size:14px;
-      line-height:20px;
-      text-align: center;
-      padding: 10px 0;
-      border-bottom: 1px solid #EBEBEB;
-      font-weight: bold;
-      color: #202020;
+    height: @table-head-row-height;
+    background: #252526;
+    color: rgba(255, 255, 255, 0.6);
+    .table-head {
+      font-size: 16px;
+      line-height: @table-head-row-height;
+      height: 100%;
+      display: inline-block;
+      &:nth-of-type(1) {
+        width: 50px;
+        color: transparent;
+      }
+      &:nth-of-type(2) {
+        width: calc(116px - 50px);
+      }
+      &:nth-of-type(3) {
+        width: calc(316px - 116px);
+      }
+      &:nth-of-type(4) {
+        width: calc(416px - 316px);
+      }
+      &:nth-of-type(5) {
+        width: calc(100% - 416px);
+      }
     }
   }
-  > tbody.data {
-    height: 350px;
+  > .table-body {
+    height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
     overflow: auto;
     display: inline-block;
     width: 100%;
-    > tr {
-      height: 60px;
-      > td {
+    > .table-body-row {
+      height: 50px;
+      border-bottom: 1px solid #404040;
+      display: flex;
+      align-items: center;
+      &:last-of-type {
+        border-bottom: none;
+      }
+      > .table-data {
         font-size:14px;
-        line-height:20px;
-        text-align: center;
-        padding: 10px 0;
-        color: #909090;
-        border-bottom: 1px solid #EBEBEB;
+        line-height:50px;
+        height: 100%;
+        color: #fff;
+        &:nth-of-type(1) {
+          width: 50px;
+        }
+        &:nth-of-type(2) {
+          width: calc(116px - 50px);
+        }
+        &:nth-of-type(3) {
+          width: calc(316px - 116px);
+        }
+        &:nth-of-type(4) {
+          width: calc(416px - 316px);
+        }
+        &:nth-of-type(5) {
+          width: calc(100% - 416px);
+        }
         > .list-img {
-          height: 40px;
-          line-height: 40px;
           position: relative;
+          height: 100%;
+          display: inline-block;
+          width: 100%;
           > img {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
             width: 40px;
             height: 40px;
+            object-fit: cover;
           }
         }
       }
@@ -425,47 +483,57 @@ table {
 
 .checkbox {
   position: relative;
-  width:14px;
-  height:14px;
-  border-radius:2px;
-}
-
-.checkbox > input,
-.checkbox > span {
   width: 100%;
   height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.checkbox > input {
-  z-index: 1;
-  opacity: 0;
-  cursor: pointer;
+  input {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    cursor: pointer;
+  }
+  .for-outer-circle {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    border: 1px solid #404040;
+    pointer-events: none;
+  }
+  .for-inner-circle {
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: #0076F6;
+    pointer-events: none;
+    opacity: 0;
+  }
 }
 
-.checkbox > span {
-  z-index: 2;
-  background:#fff;
-  border:1px solid #ccc;
-  pointer-events: none;
+.checkbox > input:checked ~ .for-outer-circle {
+  border: 1px solid #0076F6;
 }
 
-.checkbox > input:checked + span {
-  background:#fff;
-  border:1px solid #0076F6;
-  background:@color url(/static/img/g.png) no-repeat center center;
+.checkbox > input:checked ~ .for-inner-circle {
+  opacity: 1;
 }
 
 .checkbox > input:disabled {
   cursor: not-allowed;
 }
 
-.checkbox > input:disabled + span {
-  background:#CCCCCC;
-  background:rgba(0,200,175,0.3) no-repeat center center;
-}
+// .checkbox > input:disabled + span {
+// }
 
 .btns {
   text-align: center;