yichu

src/components/LiveItemad.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="videoitem" >
+        <div style="height:100%" v-html="ads">
+
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.videoitem{
+   
+
+    
+    min-width: 226px;
+    // height: 198px;
+    background-color: #fff;
+    border-radius: 17px;
+    overflow: hidden;
+    display: flex;
+    cursor: pointer;
+    flex-direction: column;
+    position: relative;
+    box-shadow: 0px 5px 6px 0px rgba(158, 158, 158, 0.11);
+    .cover{
+        width: 226px;
+        min-width: 100%;
+        height: 127px;
+    }
+    .play{
+        position: absolute;
+        top: 52px;
+        left: 101px;
+        width: 23px;
+        height: 23px;
+    }
+    .title{
+        margin: 18px;
+        margin-top: 16px;
+        margin-bottom: 0;
+        font-display: 11px;
+        color: #111;
+        display: flex;
+        align-items: center;
+        cursor: default;
+        >span{
+            margin-left: 11px;
+            font-size: 10px;
+            color: #f55455;
+            flex-shrink: 0;
+        }
+    }
+    .info{
+        display: flex;
+        align-items: center;
+        margin-top: 9px;
+        margin-bottom: 9px;
+        margin-left: 18px;
+      
+        .datetime{
+            display: flex;
+            align-items: center;
+            font-size: 10px;
+            color: #666;
+            .time{
+                margin-left: 15px;
+            }
+        }
+        .feature{
+            display: flex;
+            align-items: center;
+            margin-left: 25px;
+            // margin-top: 18px;
+            >div{
+                display: flex;
+                align-items: center;
+                >img{
+                    width: 11px;
+                    height: 11px;
+                }
+                >span{
+                    font-size: 10px;
+                    color: #111;
+                    margin-left: 4px;
+                    margin-right: 11px;
+                }
+            }
+        }
+    }
+    .state{
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 67px;
+        height: 23px;
+        border-radius:  0 17px 0 17px;
+        font-size: 10px;
+        line-height: 23px;
+        text-align: center;
+    }
+    .audit{
+        background-color: #CFF9F1;
+        color: #08AE98;
+    }
+    .live{
+       
+        background: linear-gradient(-90deg, #0EDCC2, #50DF98, #7EE278, #A2E562);
+        color: #fff;
+    }
+    .over{
+        background-color: #F7F7F7;
+        color: #121212;
+    }
+    &::v-deep(ins){
+        width: 100% !important;
+        height: 100% !important;
+    }
+    &::v-deep(iframe){
+        width: 100% !important;
+        height: 100% !important;
+    }
+}
+</style>
+<script lang="ts">
+import router from '@/router';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+
+    setup(){
+        const ads = ref("");
+        const el = document.getElementById('guanlidivadsensedisplaynone');
+        if(el){
+            console.log(el.innerHTML)
+            ads.value = el.innerHTML;
+           
+        }
+        return {
+            ads
+        }
+    }
+})
+</script>