fix: 23925 （v1.1.0全景看看）管理中心-我的素材-音乐图标未按照设计图显示

src/components/audio/index.vue

@@ -3,11 +3,13 @@
     <audio ref="audio" :key="vkey">
       <source :src="myAudioUrl+`?_=${idleft}`" type="audio/mp3" />
     </audio>
-    <div class="block" :ref="`_${vkey}`" @click="myPlay">
-      <div :id="idleft" class="left"></div>
-      <div :id="idright" class="right"></div>
-      <div class="circle"></div>
-      <i class="iconfont iconbs_stop" :class="{ iconbs_play: notPlaying }"></i>
+    <div class="UI-wrapper" @click="myPlay">
+      <div class="UI" :ref="`_${vkey}`">
+        <div :id="idleft" class="left"></div>
+        <div :id="idright" class="right"></div>
+        <div class="circle"></div>
+        <i class="iconfont" :class="notPlaying ? 'iconbs_play' : 'iconbs_stop'"></i>
+      </div>
     </div>
     <div v-if="showTime" class="namecon">
       <div class="audio-name">{{name}}</div>
@@ -57,14 +59,14 @@ export default {
           rightEl.style.transform = "rotate(" + 3.6 * this.progress + "deg)";
         } else {
           rightEl.style.transform = "rotate(0)";
-          rightEl.style.background = "#1FE4DC";
+          rightEl.style.background = "#FF9F2B";
           leftEl.style.transform =
             "rotate(" + 3.6 * (this.progress - 50) + "deg)";
         }
       } else {
         rightEl.style.transform = "rotate(0deg)";
         leftEl.style.transform = "rotate(0deg)";
-        rightEl.style.background = "#333";
+        rightEl.style.background = "#fff";
       }
     },
     init() {
@@ -248,62 +250,79 @@ export default {
   font-size: 12px;
 }
 
-@raduiW: 26px;
-@pcolor: #333;
-@iconSize: 10px;
-@rW: 78%;
+@raduiW: 18px;
+@pcolor: #fff;
+@rW: 14px;
 
-.block {
+.UI-wrapper {
   position: relative;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-image: url('~@/assets/images/icons/icon-music@2x.png');
+  width: 44px;
+  height: 50px;
+  cursor: pointer;
+  &:hover {
+    background-image: url('~@/assets/images/icons/icon-music-hover@2x.png');
+    .UI {
+      display: block;
+    }
+  }
+}
+
+.UI {
+  display: none;
+  position: absolute;
+  top: 22px;
+  left: 12px;
   width: @raduiW;
   height: @raduiW;
   min-width: @raduiW;
-  background: #1fe4dc;
+  background: #FF9F2B;
   border-radius: 50%;
-  cursor: pointer;
-  .iconfont {
+  .iconbs_play {
+    top: 50%;
+    left: 50%;
+    right: unset;
+    bottom: unset;
+    transform: translate(-47%, -50%);
+    font-size: 7px;
+    color: #fff;
+  }
+  .iconbs_stop {
     top: 50%;
     left: 50%;
     right: unset;
     bottom: unset;
     transform: translate(-50%, -50%);
-    font-size: @iconSize;
-    color: #202020;
+    font-size: 6px;
+    color: #fff;
+  }
+  .left {
+    border-radius: 50%;
+    background: @pcolor;
+    clip: rect(0, @raduiW / 2, @raduiW, 0);
+  }
+  .right {
+    border-radius: 50%;
+    background: @pcolor;
+    clip: rect(0, @raduiW, @raduiW, @raduiW / 2);
+  }
+  .circle {
+    width: @rW;
+    height: @rW;
+    background: rgb(199, 100, 63);
+    border-radius: 50%;
+  }
+  * {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
   }
-}
-
-.block * {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  margin: auto;
-}
-
-.left {
-  border-radius: 50%;
-  background: @pcolor;
-  clip: rect(0, @raduiW / 2, @raduiW, 0);
-}
-
-.right {
-  border-radius: 50%;
-  background: @pcolor;
-  clip: rect(0, @raduiW, @raduiW, @raduiW / 2);
-}
-
-.circle {
-  width: @rW;
-  height: @rW;
-  background: white;
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  bottom: unset;
-  right: unset;
 }
 
 .namecon{

src/views/material/pano/pano.js

@@ -4,13 +4,13 @@ let data = [
     name: '素材',
     en: '素材',
     type:'image',
-
+    width: 150,
   },
   {
     key: 'name',
     name: '名称',
     en: '名称',
-    // fontweight:'bold',
+    width: 340,
   },
   {
     key: 'detail',
@@ -21,23 +21,27 @@ let data = [
     showWhenHover: true,
     canclick: true,
     width: 100,
-    textAlign:'center'
+    textAlign:'center',
+    width: 100,
   },
   {
     key: 'fileSize',
     name: '大小',
     width: 100,
     en: '大小',
+    width: 80,
   },
   {
     key: 'createTime',
     name: '创建时间',
-    en: '创建时间'
+    en: '创建时间',
+    width: 150,
   },
   {
     key: 'updateTime',
     name: '修改时间',
-    en: '修改时间'
+    en: '修改时间',
+    width: 150,
   },
 ]