CPCenterData/src/views/screen/new-media.vue

<template>
    <!-- 新媒体矩阵 -->
    <div class="eb-container" ref="appRef">
        <MainTitle class="title" :title="title"></MainTitle>
        <div class="data-container">
            <div class="content-container">
                <div class="content-box">
                    <div class="content-item" v-for="(item, index) in mediaInfoList" :key="index" @click="toInfo(item)">
                        <div class="front">
                            <img :src="item.coverImage" class="content-image" />
                            <div class="content-name">
                                {{ item.modelName }}
                            </div>
                        </div>
                        <div class="opposite">
                            <img :src="item.qrCode" class="content-image" />
                            <div class="content-name">扫一扫关注微信</div>
                        </div>
                    </div>
                </div>
                <div class="data-page-container">
                    <div class="next-page-box" @click="changePage('last')">
                        上一页
                    </div>
                    <div class="page-number">{{ page }}/{{ pageTotal }}</div>
                    <div class="next-page-box" @click="changePage('next')">
                        下一页
                    </div>
                </div>
            </div>
        </div>
        <div class="page-bottom-bg"></div>
    </div>
</template>

<script>
import { useIndex } from "../../utils/utilsDramAdmin";
import MainTitle from "./components/MainTitle.vue";
export default {
    name: "NewMedia",
    components: { MainTitle },
    data() {
        return {
            title: "新媒体矩阵",
            mediaInfoList: [],
            page: 1,
            pageTotal: 1,
        };
    },
    computed: {},
    created() { },
    mounted() {
        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
        calcRate();
        windowDraw();
        this.queryData()
    },
    beforeDestroy() { },
    methods: {
        changePage(flag) {
            if (flag === "last") {
                // 上一页
                if (this.page > 1) {
                    this.page--;
                    this.queryData()
                } else {
                    this.$Message.info("已是第一页")
                }
            } else {
                // 下一页
                if (this.page < this.pageTotal) {
                    this.page++;
                    this.queryData()
                } else {
                    this.$Message.info("已是最后一页")
                }
            }
        },
        queryData() {
            const params = {
                page: this.page,
                pageSize: 15
            }
            this.$http.post("/wechat/info/getWechatInfoPage", this.common.request(params)).then(res => {
                if (res.data.code == 200) {
                    this.mediaInfoList = res.data.data.records
                    this.pageTotal = Number(res.data.data.pages)
                }
            })
        },
        toInfo(data) {
            let infoData = encodeURIComponent(JSON.stringify(data))
            this.$router.push({
                path: "/new-media-info",
                query: {
                    info: infoData
                }
            })
        }
    },
};
</script>

<style lang="less" scoped>
@import "../../styles/pbStyle.less";

.eb-container {
    width: 1920px;
    height: 1080px;
    transform: scale(var(--scale)) translate(-50%, -50%);
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url("../../assets/largeScreen/page-bg.png");
    background-size: 100%;
}

.data-page-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;

    .next-page-box {
        border: 1px solid #94d2ff;
        height: 36px;
        border-radius: 4px;
        padding: 0px 12px;
        line-height: 36px;
        background-color: rgba(9, 28, 46, 0.4);
        cursor: pointer;
    }

    .page-number {
        font-size: 20px;
        width: 80px;
        height: 36px;
        line-height: 36px;
        text-align: center;
    }
}

.data-container {
    width: 1920px;
   // height: 920px;
    overflow: hidden;
    padding: 20px 40px 50px 40px;
    color: #ffffff;
}

.content-container {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.08);
    padding: 20px;
    border-radius: 8px;
}

.content-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
}

.content-item {
    width: 20%;
    height: 270px;
    text-align: center;
    position: relative;
}

.content-image {
    width: 200px;
    height: 200px;
    margin-top: 10px;
    cursor: pointer;
}

.content-name {
    width: 100%;
    font-size: 24px;
    line-height: 60px;
}

.content-item:hover .front {
    transform: rotateY(-180deg);
}

.content-item:hover .opposite {
    transform: rotateY(0deg);
}

.content-item .front {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transition: 1s transform;
    backface-visibility: hidden;
}

.content-item .opposite {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transition: 1s transform;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}
</style>