Browse Source

style(video): 更新视频组件SVG图标并调整样式

- 添加新的倍速图标 beisu1.svg
- 替换静音图标为新版本 jingyin.svg
- 替换小窗图标为新版本 xiaochuang.svg
- 替换音量图标为新版本 yinliang.svg
- 在视频播放器中添加倍速按钮
- 调整抖音作品分析页面CSS样式格式
JX.Li 1 week ago
parent
commit
cac6d55ce1

+ 8 - 0
nexo-ui/src/views/components/video/svg/beisu1.svg

@@ -0,0 +1,8 @@
+<svg t="1779964708660" class="icon" viewBox="0 0 1024 1024" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" p-id="15184" width="25" height="25"
+>
+  <path
+    d="M960 160.128a64 64 0 0 1 64 64v575.68a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V224.192a64 64 0 0 1 64-64h896zM415.36 314.88h-40.832L229.76 697.6h41.216l144.32-382.72z m343.808 62.784h-72.256l81.6 139.072-89.28 139.264h70.976l50.112-91.84c2.88-6.976 4.864-12.544 5.952-16.704l0.512-1.92h0.704c1.664 7.616 3.328 13.184 4.864 16.704l0.704 1.408 49.984 92.352h70.4l-86.208-140.352 84.096-137.984h-66.304L819.2 461.952c-2.688 6.272-5.12 12.288-7.168 18.176l-1.984 5.76h-0.704a148.992 148.992 0 0 0-6.72-18.816l-1.92-4.224-41.536-85.184zM213.12 358.976h-36.608l-7.936 7.68a204.16 204.16 0 0 1-29.504 21.44c-14.976 8.32-29.12 14.144-42.432 17.472v48.256l13.312-4.288c21.504-7.744 39.616-18.368 54.528-31.872v238.336h48.64V358.976z m310.848-5.824c-32.064 0-57.856 10.816-77.44 32.448-19.136 20.352-28.672 46.976-29.12 80.256h48.704l0.768-11.136c1.856-17.92 6.592-32 14.208-41.664 9.152-12.48 22.848-18.688 41.216-18.688 17.024 0 29.952 3.712 38.656 11.584 8.32 7.936 12.864 20.032 12.864 36.224 0 16.64-6.592 32.448-19.52 47.04-8.32 8.704-21.632 19.904-40.768 33.28-34.56 23.68-57.408 41.984-68.224 54.464a114.56 114.56 0 0 0-29.568 79.04h207.168v-42.88H476.48l3.072-5.76c8.32-13.568 25.728-29.184 52.288-46.656 29.12-19.52 49.92-35.328 61.568-47.808 19.136-21.184 29.12-44.48 29.12-70.272 0-26.688-9.152-47.872-27.456-64.512-18.752-16.64-42.432-24.96-71.104-24.96z"
+    fill="#ffffff"
+  ></path>
+</svg>

+ 8 - 1
nexo-ui/src/views/components/video/svg/jingyin.svg

@@ -1 +1,8 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779962948709" class="icon" viewBox="0 0 1149 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39051" xmlns:xlink="http://www.w3.org/1999/xlink" width="224.4140625" height="200"><path d="M607.969418 32.243307A124.014675 124.014675 0 0 0 432.792651 40.685561l-194.120981 213.599193a41.270416 41.270416 0 0 1-30.51417 13.527949h-63.571189A144.662597 144.662597 0 0 0 0 412.271872v199.359247a144.662597 144.662597 0 0 0 144.662597 144.662596h63.571188a41.270416 41.270416 0 0 1 30.514171 13.527949l194.120981 213.599194a124.014675 124.014675 0 0 0 215.760613-83.430828V124.014675a124.116388 124.116388 0 0 0-40.660132-91.771368z m-62.757477 867.645009a20.67335 20.67335 0 0 1-35.955864 13.909376l-194.120981-213.599193a144.713453 144.713453 0 0 0-107.028453-47.347822h-63.571189a41.321273 41.321273 0 0 1-41.321272-41.321272v-199.359247a41.321273 41.321273 0 0 1 41.321272-41.321273h63.571189a144.61174 144.61174 0 0 0 107.028453-47.347821l194.120981-213.599193a20.67335 20.67335 0 0 1 35.955864 13.909376z" p-id="39052" fill="#ffffff"></path><path d="M1167.420266 846.122651m-45.496969 24.385038l-0.022412 0.012012q-45.496969 24.385038-69.882007-21.111931l-335.540526-626.042777q-24.385038-45.496969 21.111931-69.882007l0.022413-0.012013q45.496969-24.385038 69.882007 21.111932l335.540525 626.042777q24.385038 45.496969-21.111931 69.882007Z" p-id="39053" fill="#ffffff"></path><path d="M789.875355 897.322791m-45.915617-23.587293l-0.022618-0.011619q-45.915617-23.587292-22.328325-69.50291l324.563468-631.803417q23.587292-45.915617 69.50291-22.328325l0.022618 0.011619q45.915617 23.587292 22.328325 69.50291l-324.563468 631.803417q-23.587292 45.915617-69.50291 22.328325Z" p-id="39054" fill="#ffffff"></path></svg>
+<svg t="1779964247542" class="icon" viewBox="0 0 1024 1024" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" p-id="9287" width="25" height="25"
+>
+  <path
+    d="M170.666667 298.666667l85.162666-0.213334L455.253333 139.093333q31.914667-20.906667 65.493334-2.730666 33.578667 18.133333 34.048 56.32v638.677333q0 38.144-33.536 56.32-33.578667 18.133333-65.493334-2.773333l-199.466666-158.976-85.162667 0.256q-35.370667 0-60.330667-25.002667-25.002667-25.002667-25.514666-60.330667V384q0-35.328 25.002666-60.330667Q135.338667 298.709333 170.666667 298.666667z m110.592 85.12L170.666667 384l0.512 256.853333 110.592-0.256 187.733333 151.338667-0.512-559.829333-187.733333 151.68z m403.541333-42.709334a42.666667 42.666667 0 1 0-60.330667 60.330667l90.496 90.496-90.453333 90.538667a42.666667 42.666667 0 0 0 60.288 60.330666l90.538667-90.538666 90.496 90.538666a42.666667 42.666667 0 0 0 60.330666-60.330666l-90.496-90.538667 90.496-90.496a42.666667 42.666667 0 0 0-60.330666-60.330667l-90.496 90.496-90.538667-90.496z"
+    fill="#ffffff"
+  ></path>
+</svg>

+ 12 - 1
nexo-ui/src/views/components/video/svg/xiaochuang.svg

@@ -1 +1,12 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779962202974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17431" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M894.976 64c70.656 0 128 57.344 128 128v639.488c0 70.656-57.344 128-128 128H128c-70.656 0-128-57.344-128-128V192c0-70.656 57.344-128 128-128h766.976z m0 95.744H128c-15.36 0-28.672 11.264-31.232 26.112l-0.512 5.632v639.488c0 15.36 11.264 28.672 26.112 31.232l5.632 0.512h767.488c15.36 0 28.672-11.264 31.232-26.112l0.512-5.632V192c0-15.36-11.264-28.672-26.112-31.232l-6.144-1.024z m-127.488 287.744c35.328 0 64 28.672 64 64v192c0 35.328-28.672 64-64 64H468.992c-35.328 0-64-28.672-64-64V511.488c0-35.328 28.672-64 64-64h298.496z m0 0" p-id="17432" fill="#ffffff"></path></svg>
+<svg t="1779964345584" class="icon" viewBox="0 0 1024 1024" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" p-id="10526" width="25" height="25"
+>
+  <path
+    d="M85.333333 341.333333v341.333334a170.666667 170.666667 0 0 0 170.666667 170.666666h170.666667v-85.333333H256q-35.328 0-60.330667-25.002667T170.666667 682.666667V341.333333q0-35.328 25.002666-60.330666T256 256h512q35.328 0 60.330667 25.002667T853.333333 341.333333v85.333334h85.333334V341.333333a170.666667 170.666667 0 0 0-170.666667-170.666666H256a170.666667 170.666667 0 0 0-170.666667 170.666666z"
+    fill="#ffffff"
+  ></path>
+  <path
+    d="M512 768v-170.666667a85.333333 85.333333 0 0 1 85.333333-85.333333h256a85.333333 85.333333 0 0 1 85.333334 85.333333v170.666667a85.333333 85.333333 0 0 1-85.333334 85.333333h-256a85.333333 85.333333 0 0 1-85.333333-85.333333z"
+    fill="#ffffff"
+  ></path>
+</svg>

+ 8 - 1
nexo-ui/src/views/components/video/svg/yinliang.svg

@@ -1 +1,8 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779962767054" class="icon" viewBox="0 0 1156 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33462" xmlns:xlink="http://www.w3.org/1999/xlink" width="225.78125" height="200"><path d="M315.164953 700.366562l194.139373 213.619431a20.675309 20.675309 0 0 0 35.959271-13.910694V124.026424a20.675309 20.675309 0 0 0-35.959271-13.910694l-194.139373 213.619431a144.625441 144.625441 0 0 1-107.038593 47.352307h-63.577212a41.325188 41.325188 0 0 0-41.325187 41.325188v199.378135a41.325188 41.325188 0 0 0 41.325187 41.325188h63.577212a144.727164 144.727164 0 0 1 107.038593 47.352307z m-170.386927 55.947947A144.676303 144.676303 0 0 1 0 611.689068v-199.378136a144.676303 144.676303 0 0 1 144.676303-144.676302h63.577211a41.274326 41.274326 0 0 0 30.517062-13.529231L432.833656 40.689415a124.026424 124.026424 0 0 1 215.781056 83.438733v775.845428a124.026424 124.026424 0 0 1-215.781056 83.438732l-194.139373-213.619431a41.274326 41.274326 0 0 0-30.517062-13.52923z m589.055581-449.923211a51.675558 51.675558 0 0 1 56.685441-86.465008 348.860875 348.860875 0 0 1 0 583.613371 51.675558 51.675558 0 0 1-56.685441-86.465007 245.484329 245.484329 0 0 0 0-410.78508z m120.059206-177.405851a51.675558 51.675558 0 1 1 59.457408-84.532261 571.101376 571.101376 0 0 1 0 934.661303 51.675558 51.675558 0 1 1-59.457408-84.532261 467.750261 467.750261 0 0 0 0-765.469627z" p-id="33463" fill="#ffffff"></path></svg>
+<svg t="1779964183648" class="icon" viewBox="0 0 1024 1024" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" p-id="8306" width="25" height="25"
+>
+  <path
+    d="M308.971 657.987l150.28 165.279a16 16 0 0 0 11.838 5.236c8.837 0 16-7.163 16-16v-600.67a16 16 0 0 0-5.236-11.839c-6.538-5.944-16.657-5.463-22.602 1.075l-150.28 165.279A112 112 0 0 1 226.105 403H177c-17.673 0-32 14.327-32 32v154.333c0 17.674 14.327 32 32 32h49.105a112 112 0 0 1 82.866 36.654zM177 701.333c-61.856 0-112-50.144-112-112V435c0-61.856 50.144-112 112-112h49.105a32 32 0 0 0 23.676-10.472l150.28-165.28c35.668-39.227 96.383-42.113 135.61-6.445a96 96 0 0 1 31.418 71.028v600.671c0 53.02-42.98 96-96 96a96 96 0 0 1-71.029-31.417l-150.28-165.28a32 32 0 0 0-23.675-10.472H177z m456.058-348.336c-18.47-12.118-23.621-36.915-11.503-55.386 12.118-18.471 36.916-23.621 55.387-11.503C752.495 335.675 799 419.908 799 512c0 92.093-46.505 176.325-122.058 225.892-18.471 12.118-43.269 6.968-55.387-11.503-12.118-18.471-6.968-43.268 11.503-55.386C686.303 636.07 719 576.848 719 512c0-64.848-32.697-124.07-85.942-159.003z m92.93-137.323c-18.07-12.71-22.415-37.66-9.706-55.73s37.66-22.415 55.73-9.706C888.942 232.478 960 366.298 960 512s-71.058 279.522-187.988 361.762c-18.07 12.71-43.021 8.364-55.73-9.706-12.709-18.07-8.363-43.02 9.706-55.73C821.838 740.912 880 631.38 880 512c0-119.38-58.161-228.912-154.012-296.326z"
+    fill="#ffffff"
+  ></path>
+</svg>

+ 3 - 0
nexo-ui/src/views/components/video/video_play.vue

@@ -61,6 +61,9 @@
           <div class="pip-btn" @click="togglePiP">
             <img src="./svg/xiaochuang.svg" alt="小窗播放"/>
           </div>
+          <div class="pip-btn" @click="togglePiP">
+            <img src="./svg/beisu1.svg" alt="小窗播放"/>
+          </div>
           <div class="pip-btn" @click="toggleMute">
             <img v-if="!isMuted" src="./svg/yinliang.svg" alt="音量"/>
             <img v-else src="./svg/jingyin.svg" alt="静音"/>

+ 3 - 2
nexo-ui/src/views/module/douyin/worksAanalysis/index.vue

@@ -121,8 +121,9 @@ export default {
   gap: 10px;
   font-size: 14px;
   font-weight: 600;
-  div{
-    border-bottom:  1px solid #eee;
+
+  div {
+    border-bottom: 1px solid #eee;
   }
 }
 </style>