提交

src/tool/adList.js

@@ -53,7 +53,7 @@ document.addEventListener('DOMContentLoaded', function () {
         let e =
           showType === 1
             ? generateCarouselAd(item, D, v.slotId, v.width || 0, v.height || 0)
-            : generateAlternateAd(item, D, v.slotId)
+            : generateAlternateAd(item, D, v.slotId, v.width || 0, v.height || 0)
         if (e == -1) return
         ele.appendChild(e)
         ele.style.width = '100%'
@@ -82,7 +82,7 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   // 生成交替广告
-  const generateAlternateAd = function (generateAlternate = {}, D, slotId) {
+  const generateAlternateAd = function (generateAlternate = {}, D, slotId, width, height) {
     const week = D.getDay() === 0 ? 7 : D.getDay()
     const timeInterval = (generateAlternate.timeInterval || '')
       .slice(week * 24, week * 24 + 24)
@@ -100,8 +100,8 @@ document.addEventListener('DOMContentLoaded', function () {
     if (fileType === 'jpg' || fileType === 'png' || fileType === 'gif') {
       const son_ele = document.createElement('img')
       son_ele.src = stuff.addr
-      son_ele.style.width = '100%'
-      son_ele.style.height = '100%'
+      son_ele.style.width = width + 'px'
+      son_ele.style.height = height + 'px'
       son_ele.onload = () => {
         const uuid = localStorage.getItem('ad_id')
         fetch(`${base}ad/show?uuid=${uuid}&stuffId=${stuff.stuffId}&slotId=${slotId}`).then((res) =>
@@ -121,6 +121,8 @@ document.addEventListener('DOMContentLoaded', function () {
     }
     const son_ele = document.createElement('video')
     son_ele.setAttribute('loop', 'loop')
+    son_ele.setAttribute('autoplay', 'autoplay')
+    son_ele.setAttribute('muted', 'muted')
     son_ele.src = stuff.addr
     son_ele.style.width = '100%'
     son_ele.style.height = '100%'
@@ -251,9 +253,9 @@ document.addEventListener('DOMContentLoaded', function () {
     // 创建图片容器
     const imagesContainer = document.createElement('div')
     imagesContainer.style = `
-      display: flex;
-      width: ${images.length * width}px;
+      width: ${images.length * width + 10}px;
       height: ${height}px;
+      display: flex;
       transition: transform 0.5s ease;
     `
 
@@ -263,9 +265,8 @@ document.addEventListener('DOMContentLoaded', function () {
       position: absolute;
       bottom: 10px;
       left: 50%;
+      margin-right: 5px;
       transform: translateX(-50%);
-      display: flex;
-      gap: 5px;
     `
     // 添加图片到容器
     images.forEach((src, index) => {
@@ -273,12 +274,9 @@ document.addEventListener('DOMContentLoaded', function () {
       img.src = src.addr
       img.alt = `Image ${index + 1}`
       img.style = `
-        width: 100%;
-        flex-shrink: 0;
+        flex: 1;
         height: 100%;
-        display: block;
       `
-      if (index !== 0) img.style.display = 'none'
 
       img.addEventListener('click', () => {
         const uuid = localStorage.getItem('ad_id')
@@ -286,7 +284,7 @@ document.addEventListener('DOMContentLoaded', function () {
         fetch(`${base}ad/click?uuid=${uuid}&stuffId=${src.stuffId}&slotId=${slotId}`)
           .then((res) => res.text())
           .then(() => {
-            window.open(v.ad_url)
+            window.open(src.ad_url)
           })
       })
       // 图片加载完成
@@ -308,6 +306,7 @@ document.addEventListener('DOMContentLoaded', function () {
         border-radius: 50%;
         width: 10px;
         height: 10px;
+        margin-right: 5px;
         display: inline-block;
       `
       if (index !== 0) indicator.style.backgroundColor = '#ccc'
@@ -325,7 +324,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     function showImage(index) {
       // 更新图片位置
-      imagesContainer.style.transform = `translateX(-${index * 100}%)`
+      imagesContainer.style.transform = `translateX(-${index * width}px)`
       // 更新指示器
       indicatorsContainer.querySelectorAll('button').forEach((btn, i) => {
         btn.style.backgroundColor = i === index ? '#000' : '#ccc'

src/tool/index.html

@@ -9,7 +9,7 @@
 </head>
 
 <body>
-    <div id="sxtv-ad-17"></div>
+    <div id="sxtv-ad-120"></div>
 </body>
 
 </html>

src/views/ExaminePage.vue

@@ -32,6 +32,34 @@
         {{ getStatus(scope.row.status) }}
       </template>
     </el-table-column>
+    <el-table-column prop="stuffName" label="查看">
+      <template #default="scope">
+        <el-image
+          style="width: 100px; height: 100px"
+          :src="scope.row.addr"
+          v-if="isImg(scope.row.addr)"
+          :zoom-rate="1.2"
+          :max-scale="7"
+          :min-scale="0.2"
+          :preview-src-list="[scope.row.addr]"
+          :initial-index="4"
+          fit="cover"
+          :z-index="100000"
+          :preview-teleported="true"
+        />
+        <video
+          v-else
+          style="width: 100px; height: 100px"
+          :src="scope.row.addr"
+          @click="
+            () => {
+              dialogVideo = true
+              dialogVideoUrl = scope.row.addr
+            }
+          "
+        ></video>
+      </template>
+    </el-table-column>
     <el-table-column prop="stuffName" label="创意">
       <template #default="scope">
         {{ OriginalityName(scope.row.creativeId) }}
@@ -75,6 +103,16 @@
     :total="pages.total"
     @current-change="page"
   />
+  <el-dialog v-model="dialogVideo" title="视频展示">
+    <video
+      v-if="dialogVideo"
+      style="width: 100%"
+      autoplay
+      muted
+      :src="dialogVideoUrl"
+      controls
+    ></video>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -102,6 +140,8 @@ const pages = reactive<Pages>({
   status: 0,
 })
 
+const dialogVideo = ref(false)
+const dialogVideoUrl = ref('')
 const tableData = ref<SourceMaterialList>([])
 
 const OriginalityName = (id: number) => {
@@ -122,6 +162,10 @@ const onSubmit = () => {
   })
 }
 
+const isImg = (url: string) => {
+  return /\.(jpg|jpeg|png|gif)$/.test(url)
+}
+
 const page = (val: number) => {
   pages.pageNum = val
   onSubmit()

src/views/SourceMaterialPage.vue

@@ -157,7 +157,14 @@
   </el-dialog>
 
   <el-dialog v-model="dialogVideo" title="视频展示">
-    <video style="width: 100%" :src="dialogVideoUrl" controls></video>
+    <video
+      style="width: 100%"
+      v-if="dialogVideo"
+      autoplay
+      muted
+      :src="dialogVideoUrl"
+      controls
+    ></video>
   </el-dialog>
 </template>