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

<template>
    <div class="tv-container">
        <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">
                            <TvRate :val="rateObj"></TvRate>
                        </div>
                        <div class="tv-int"> 2025 / 中国大陆 / 剧情 爱情 / 瞿友宁 / 白敬亭 章若楠 </div>
                    </div>
                    <div class="info-right">
                        <i class="iconfont icon-xiangkan"></i>
                    </div>
                </div>
                <div class="tv-desc">
                     <DescComp :val="testDesc"/>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .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>
import TvRate from "@/components/TvRate.vue";
import DescComp from "@/components/DescComp.vue";
import axios from "axios";
export default {
    data() {
        return {
            testDesc:"温以凡回到家乡工作，意外遇到了高中同学桑延。久别重逢，两人彼此装不认识，却又一次次巧遇。温以凡遭到隔壁男人骚扰，无奈决定搬家。桑延的公寓被邻居家失火殃及，也需要搬家。桑延和温以凡因此再次相遇，两人决定合租。桑延的毒舌和温以凡的温柔，让彼此的生活都发生了变化。",
            rateObj:{
                star_count:2.5,
                value: 0
            }
        }
    },
    beforeMount() {
        this.$emit('changePage','1001')
    },
    created() {
        axios.get("/api/subject_collection/tv_domestic/items?start=0&count=18").then((res)=>{
            console.log(res)
        }).catch((err)=>{
            console.log(err)
        })
    },
    components:{
        TvRate,
        DescComp
    }
}
</script>