admin

12_vuecli/mediaapp/src/App.vue

@@ -30,5 +30,7 @@ export default {
 }
 </script>
 <style>
-
+  #app{
+    padding:1rem 0;
+  }
 </style>

12_vuecli/mediaapp/src/assets/css/iconfont.css

@@ -1,35 +1,38 @@
 @font-face {
-    font-family: "iconfont"; /* Project id 4831992 */
-    src: url('//at.alicdn.com/t/c/font_4831992_hguvkpo926.woff2?t=1739944795187') format('woff2'),
-         url('//at.alicdn.com/t/c/font_4831992_hguvkpo926.woff?t=1739944795187') format('woff'),
-         url('//at.alicdn.com/t/c/font_4831992_hguvkpo926.ttf?t=1739944795187') format('truetype');
-  }
-  
-  .iconfont {
-    font-family: "iconfont" !important;
-    font-size: 16px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  .icon-user:before {
-    content: "\e608";
-  }
-  
-  .icon-home:before {
-    content: "\e7c6";
-  }
-  
-  .icon-talk:before {
-    content: "\e7ab";
-  }
-  
-  .icon-book:before {
-    content: "\e862";
-  }
-  
-  .icon-tv:before {
-    content: "\e677";
-  }
-  
+  font-family: "iconfont"; /* Project id 4831992 */
+  src: url('//at.alicdn.com/t/c/font_4831992_0gmv8vugsgit.woff2?t=1740022589381') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4831992_0gmv8vugsgit.woff?t=1740022589381') format('woff'),
+       url('//at.alicdn.com/t/c/font_4831992_0gmv8vugsgit.ttf?t=1740022589381') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-xiangkan:before {
+  content: "\e600";
+}
+
+.icon-user:before {
+  content: "\e608";
+}
+
+.icon-home:before {
+  content: "\e7c6";
+}
+
+.icon-talk:before {
+  content: "\e7ab";
+}
+
+.icon-book:before {
+  content: "\e862";
+}
+
+.icon-tv:before {
+  content: "\e677";
+}

12_vuecli/mediaapp/src/components/NavComp.vue

@@ -98,8 +98,10 @@ export default {
     },
     methods: {
         goPage(path,id){
-            this.$router.push(path);
-            this.activeTab = id;
+            if(window.location.pathname != path){
+                this.$router.push(path);
+                this.activeTab = id;
+            }
         }
     },
 }

12_vuecli/mediaapp/src/views/book/BookPage.vue

@@ -5,6 +5,10 @@
 </template>
 <script>
 export default {
+    // beforeRouteEnter (to, from, next) {
+    //     console.log(to,from,next);
+    //     next();
+    // },
     mounted() {
         this.$emit("changePage",'1002')
     },

12_vuecli/mediaapp/src/views/tv/TvPage.vue

@@ -1,10 +1,119 @@
 <template>
     <div class="tv-container">
-        <h1>TV</h1>
+        <div class="tv-list">
+            <div class="tv-item">
+                <div class="tv-img">
+                    <div class="left-img">
+                        <img src="https://images.weserv.nl/?url=https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2918313491.jpg" alt="">
+                    </div>
+                    <div class="right-img">
+                        <img src="https://images.weserv.nl/?url=https://img1.doubanio.com/view/photo/m/public/p2909919779.jpg" alt="" srcset="">
+                    </div>
+                </div>
+                <div class="tv-info">
+                    <div class="info-left">
+                        <div class="tv-title">难哄(2025)</div>
+                        <div class="tv-rate">暂无评分</div>
+                        <div class="tv-int"> 2025 / 中国大陆 / 剧情 爱情 / 瞿友宁 / 白敬亭 章若楠 </div>
+                    </div>
+                    <div class="info-right">
+                        <i class="iconfont icon-xiangkan"></i>
+                    </div>
+                </div>
+                <div class="tv-desc">
+                     温以凡回到家乡工作，意外遇到了高中同学桑延。久别重逢，两人彼此装不认识，却又一次次巧遇。温以凡遭到隔壁男人骚扰，无奈决定搬家。桑延的公寓被邻居家失火殃及，也需要 
+                </div>
+            </div>
+        </div>
+        <div class="test-img"></div>
     </div>
 </template>
+<style scoped>
+    .test-img{
+        width: 30px;
+        height: 30px;
+        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAeRJREFUOBGtlDsvBFEUx3d2djfiMbTsQ0NEwTaiQSGiRKWREDofgMJHEAqdSPSE0BC9SiEqWQWSzT4SzSbrsR7Fzo7fEXfNg9klbjI5j/s/vzn3MRMI1DFyudxaPp8/qEMa0GqJ0ul0QzgcvtM0zbAsqzMWi+X9aoJ+kzIXiUSmgLXhinZOcn6jJpDieRvA7tvSX64vMJvNdiAdV3I67c5kMkMq/s76AgHMUqTbC0Oh0II9dvvVQ0mlUs2GYbRWKpU2ij4swA3pylX0ZJrmNPn7crn8oOv6Y7FYfEgmk8+i07gOl0z24js6cUHqCU1uwbksefcfYPJCHeDFx5LpUq7DNp2GZeYPw2KrVuLx+Gp1D4GOATwEZvwGSFdv6Oe48PtSVwVKwCfWB/SEJyZxHaMAcBLYmdI6gJIEGg0Gg1e4tTqVZfawzBsFE+u5h4heyLfYRT/4LERrcs95gNwr+RI8nbsLJWa5I+68B8hbPSJ3kYq/03qAvHVYFShL7phni9hSuU/r0TqA8u9DOGArKvCZzXCKEzyL7O8o4Fs1T4ftHGKXisU6gOzfIKLIp2CnVCr1JhKJHVXAiZ4C7Ae8Ts6UPDfCsUUhJRYLrJGCa+xSNBo9ss8pH+gr/jK/tj0a2ETv2IZ35FSkS7HbzakAAAAASUVORK5CYII=");
+        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAfhJREFUOBGlVD1LHFEUPXfWrzGJO2uhaIQ0iljESgKSpAjBwpXVKikEl6TzD6TwJ4gWaQMBS8WQgCRZ61QpglUgRbQUbMR1XfwodvbmvE1mdt/ssDPBC493733nnrkf7w2QQrSU29D9wY8poJAkkG6hD8O5E+IGgJsHkr8+7hTjdDpsnA0PLkHE4yK2r5iETyYUfdUkkRa96W3VOhLqXv8oFHNhgGCC/Xwc2jFKR0J0966w1IwVp/LasiNGOBTdxV24bhbqenCQRUY9qLzl2CasGEUVdbyA1M5R1wrq/gUqVxUp4tLghCX85D7VlonFksJQ9Un3w5S8c2sy8z3TGtGDRsla8op0vKe3O0UuMRBVDm9N8uX1Zg/3s8+hmU/sGS/wf8kN0UWZP/tgokJCY+jX3ENmWqJ3zNiJonoKXxalcPY9wFqExqmf3fvIuL+SM2WZNX9SCheHAZnZ2++h9FyxufdaQfG6CBznTvQshtDhSyA4jQieRmExhO2gaFBoi5OK8EkYECiqX9jdd1wauP7tbVgrw8a/TzETBpkp1nWZ96sg8+VV8j0j6VF4Dozo3sB4ix0ZypD3iO3r+QvQbfi1KVkobwcBkj//hmp5msSbXHxqlC67bCtDDr2fN/43wYvMaFkK1dOALNjlJa6Z8RuIP0vfAZfVhj/iqoy46fpKwgAAAABJRU5ErkJggg==");
+    }
+
+    .tv-list .tv-item{
+        border-bottom: 1px solid #ccc;
+        padding-bottom: .2rem;
+    }
+    .tv-list{
+        padding:.2rem
+    }
+    .tv-list .tv-img{
+        display: flex;
+    }
+    .tv-list .tv-img .left-img{
+        width: 35%;
+        height: 3.3rem;
+        overflow: hidden;
+        border-radius: .1rem;
+    }
+    .tv-list .left-img img{
+        width: 100%;
+    }
+    .tv-list .tv-img img{
+        width: 100%;
+    }
+    .tv-list .tv-img .right-img{
+        margin-left: 2%;
+        width: 63%;
+        height: 3.3rem;
+        overflow: hidden;
+        border-radius: .1rem;
+    }
+    /* 信息部分样式 */
+    .tv-info{
+        display: flex;
+        margin-top: .1rem;
+    }
+    .tv-info .info-left{
+        width: 80%;
+    }
+    .tv-info .info-left .tv-title{
+        font-size: .3rem;
+        font-weight: 700;
+        color: #333;
+        margin-bottom: .1rem;
+    }
+    .tv-info .info-left .tv-rate{
+        font-size: .2rem;
+        color: #ff9900;
+        margin-bottom: .1rem;
+    }
+    .tv-info .info-left .tv-int{
+        font-size: .2rem;
+        color: #999;
+    }
+    .tv-info .info-right{
+        width: 20%;
+        text-align: right;
+        line-height: .1rem;
+    }
+    .tv-info .info-right i{
+        font-size: .45rem;
+        color: #ff9900;
+    }
+    /* 评论部分 */
+    .tv-desc{
+        font-size: .25rem;
+        color: #666;
+        margin-top: .2rem;
+    }
+</style>
 <script>
 export default {
+    data() {
+        return {
+            rateObj:{
+                star_count:2.5,
+                value: 5.4
+            }
+        }
+    },
     beforeMount() {
         this.$emit('changePage','1001')
     },