qimall/addons/ShareRedpack/backend/views/default/edit.php

<?php
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: lun
 * Date: 2021-09-15
 * Time: 12:36
 */
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-upload');
?>
<link rel="stylesheet" href="<?= Yii::$app->request->baseUrl ?>/resources/css/iconfont.css">
<!--<link rel="stylesheet" href="resources/css/iconfont.css">-->
<!-- 加载字体库 -->
<div id="app" v-cloak>
    <el-card shadow='never' v-loading="posterLoading" style="background: transparent;padding:0;border:0">
        <div style="min-width: 1300px;">
            <div class="header_box">
                <div class="add_temp_box" style="background: #fff;border-radius:5px;overflow:hidden">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="编辑海报" name="1"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="flex flex-y-center" style="background: #fff;padding: 25px;border-radius:5px 5px 0 0">
                    <div class="template_data_left flex flex-y-center" style="margin-right: 40px;">
                        <div class="template_data_left_title">海报名称</div>
                        <el-input placeholder="请输入名称，不超过10个文字" maxlength='10' v-model="sendData.name" clearable></el-input>
                    </div>
                    <div class="template_data_left flex flex-y-center" style="margin-right: 40px;">
                        <div class="template_data_left_title">关键词</div>
                        <el-input placeholder="请输入关键词，不超过10个文字" maxlength='10' v-model="sendData.key_word" clearable></el-input>
                    </div>
                </div>
            </div>

            <div class="main_box flex">
                <div class="main_img_box">
                    <img class="main_img" src="resources/img/mall/decorate/duihuakuangSmall.png" alt="">
                    <div class="main_content">
                        <img class="main_content_img" :src="sendData.share.bg_pic.url" v-if='sendData.share.bg_pic.url' alt="">
                        <div v-else class="default_tips">暂时未设置海报背景</div>
                        <!-- 自定义海报内容插件 -->
                        <div class="diy_avatar iconfont icon-weibiaoti-1" v-if='selectBool(1)' :style="{fontSize:sendData.share.head.size+'px','line-height':sendData.share.head.size+'px',top:sendData.share.head.top+'px',left:sendData.share.head.left+'px'}"></div>
                        <div class="diy_avatar" ref="nameAttr" v-if='selectBool(2)' :style="{color:sendData.share.name.color,fontSize:sendData.share.name.font+'px',top:sendData.share.name.top+'px',left:sendData.share.name.left+'px'}">昵称设置</div>
                        <!--                        <img class="diy_avatar" src="resources/img/mall/decorate/code.jpg" v-if='selectBool(3)' :style="{width:sendData.share.qr_code.size+'px',top:sendData.share.qr_code.top+'px',left:sendData.share.qr_code.left+'px','border-radius':sendData.share.qr_code.type == 1?'50%':''}">-->
                        <img class="diy_avatar" src="resources/img/mall/decorate/code.jpg" v-if='selectBool(3)' :style="{width:sendData.share.qr_code.size+'px',top:sendData.share.qr_code.top+'px',left:sendData.share.qr_code.left+'px'}">
                        <div
                            class="diy_avatar"
                            ref="nameAttr"
                            v-if='selectBool(4)'
                            :style="{
                                color: sendData.share.memberid.color,
                                fontSize: sendData.share.memberid.font+'px',
                                top: sendData.share.memberid.top+'px',
                                left: sendData.share.memberid.left+'px'
                            }"
                        >会员ID：0001</div>
                    </div>
                </div>
                <div class="edit_box">
                    <com-attachment v-model="sendData.share.bg_pic.url" :multiple="false" :max="1">
                        <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 1334"
                                    placement="top">
                            <el-button size="mini">更换海报背景</el-button>
                        </el-tooltip>
                    </com-attachment>

                    <!--                    <com-upload @success="handleSuccess" @start='beginAddImg' accept="image/*" :fields="fields" :simple="true">-->
                    <!--                        <el-button type="primary" :loading="addImgLoad" @click='beginAddImg'>更换海报背景</el-button>-->
                    <!--                        <el-tooltip class="item" effect="dark" content="建议尺寸为750*1334" placement="right">-->
                    <!--                            <i class="el-icon-info"></i>-->
                    <!--                        </el-tooltip>-->
                    <!--                    </com-upload>-->

                    <div class="btn_list_box flex">
                        <div class="btn_list" @click='selectItem(1)' :class="{btn_active:select_index == 1}">
                            <i class="iconfont icon-weibiaoti-1 btn_icon" :class="{btn_icon_close_active:select_index == 1}" style="font-size: 50px;"></i>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(1)' v-if='selectBool(1)' :class="{btn_icon_close_active:select_index == 1}"></i>
                        </div>
                        <div class="btn_list" @click='selectItem(2)' :class="{btn_active:select_index == 2}">
                            <i class="iconfont icon-username btn_icon" :class="{btn_icon_close_active:select_index == 2}"></i>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(2)' v-if='selectBool(2)' :class="{btn_icon_close_active:select_index == 2}"></i>
                        </div>
                        <div class="btn_list" @click.stop='selectItem(3)' class="{btn_active:select_index == 3}">
                            <i class="iconfont icon-a-31erweima btn_icon" :class="{btn_icon_close_active:select_index == 3}"></i>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(3)' v-if='selectBool(3)' :class="{btn_icon_close_active:select_index == 3}"></i>
                        </div>
                        <div class="btn_list" @click.stop='selectItem(4)' :class="{btn_active:select_index == 4}" style="margin-right: 0;">
                            <i class="iconfont icon-account-unselected btn_icon" :class="{btn_icon_close_active:select_index == 4}"></i>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(4)' v-if='selectBool(4)' :class="{btn_icon_close_active:select_index == 4}"></i>
                        </div>
                    </div>

                    <div class="set_box">
                        <!-- 头像设置 -->
                        <div class="set_avatar" v-if="select_index == 1">
                            <div class="set_title">头像设置</div>
                            <div style="padding-left: 16px;width:500px">
                                <div class="flex flex-y-center">
                                    <span class="slider_title">大小</span>
                                    <!-- :disabled='!selectBool(1)' 用来判断是否禁用，暂没用到-->
                                    <el-slider v-model="sendData.share.head.size" @input="attarController($event,'avatarSize')" :min="40" :max='350' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">上间距</span>
                                    <el-slider v-model="sendData.share.head.top" :max="avatar_max_top" style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">左间距</span>
                                    <el-slider v-model="sendData.share.head.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
                        </div>
                        <!-- 昵称设置 -->
                        <div class="set_nickname" v-if="select_index == 2">
                            <div class="set_title">昵称设置</div>
                            <div style="padding-left: 16px;width:500px">
                                <div class="flex flex-y-center">
                                    <span class="slider_title" style="position: relative;top:-5px">昵称颜色</span>
                                    <el-color-picker v-model="sendData.share.name.color"></el-color-picker>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">大小</span>
                                    <el-slider v-model="sendData.share.name.font" @input="attarController($event,'nameSize')" :min="12" :max='100' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">上间距</span>
                                    <el-slider v-model="sendData.share.name.top" :max="avatar_max_top" style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">左间距</span>
                                    <el-slider v-model="sendData.share.name.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
                        </div>
                        <!-- 二维码设置 -->
                        <div class="set_avatar" v-if="select_index == 3">
                            <div class="set_title">二维码设置</div>
                            <div style="padding-left: 16px;width:500px">
                                <!--                                <div class="flex flex-y-center" style="margin-bottom: 4px;">-->
                                <!--                                    <span class="slider_title">样式</span>-->
                                <!--                                    <el-radio v-model="sendData.share.qr_code.type" :label="1">圆形</el-radio>-->
                                <!--                                    <el-radio v-model="sendData.share.qr_code.type" :label="2">方形</el-radio>-->
                                <!--                                </div>-->
                                <div class="flex flex-y-center">
                                    <span class="slider_title">大小</span>
                                    <el-slider v-model="sendData.share.qr_code.size" @input="attarController($event,'codeSize')" :min="80" :max='400' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">上间距</span>
                                    <el-slider v-model="sendData.share.qr_code.top" :max="avatar_max_top" style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">左间距</span>
                                    <el-slider v-model="sendData.share.qr_code.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 会员ID设置 -->
                    <div class="set_memberid" v-if="select_index == 4">
                        <div class="set_title">会员ID设置</div>
                        <div style="padding-left: 16px;width:500px">
                            <div class="flex flex-y-center">
                                <span class="slider_title" style="position: relative;top:-5px">ID颜色</span>
                                <el-color-picker v-model="sendData.share.memberid.color"></el-color-picker>
                            </div>
                            <div class="flex flex-y-center">
                                <span class="slider_title">大小</span>
                                <el-slider v-model="sendData.share.memberid.font" @input="attarController($event, 'nameSize')" :min="12" :max='100' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                            </div>
                            <div class="flex flex-y-center">
                                <span class="slider_title">上间距</span>
                                <el-slider v-model="sendData.share.memberid.top" :max="avatar_max_top" style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                            </div>
                            <div class="flex flex-y-center">
                                <span class="slider_title">左间距</span>
                                <el-slider v-model="sendData.share.memberid.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                            </div>
                        </div>
                    </div>

                    <div class="save_btn">
                        <el-button type="primary" @click="savePoster">点击保存</el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeIndex: '1',
                activeName: '1',
                select_index: 0,
                select_arr: [], //选择了那些属性
                addImgLoad: false, //是否在上传图片
                options: [],
                color1: '#000000',
                posterLoading: false,
                sendData: {
                    share: {
                        bg_pic: {
                            url: '',
                            is_show: 0
                        },
                        head: {
                            is_show: 0,
                            size: 40,
                            top: 0,
                            left: 0,
                            file_type: 'image'
                        },
                        qr_code: {
                            is_show: 0,
                            size: 80,
                            top: 0,
                            left: 0,
                            type: 1,
                            file_type: 'image',
                        },
                        name: {
                            is_show: 0,
                            font: 12,
                            top: 0,
                            left: 0,
                            color: '#000000',
                            file_type: 'text'
                        },
                        memberid: {
                            is_show: 0,
                            font: 12,
                            top: 0,
                            left: 0,
                            color: '#000000',
                            file_type: 'text'
                        },
                    },
                    name: '',
                    key_word: '',
                },
                params: {},
                fields: {
                    upload_type: 'images'
                },
                avatar_max_top: 1285,
                avatar_max_left: 610,
                id: '',
            }
        },
        computed: {
            selectBool() {
                return function(num) {
                    if (JSON.stringify(this.select_arr).indexOf(num) != -1) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
        created() {
            this.id = getQuery('id');
            if (this.id) {
                this.getPosterDetail();
            }
        },
        methods: {
            getPosterDetail() {
                this.posterLoading = true;
                this.$request({
                    params: {
                        r: 'share-redpack/default/edit',
                        id: this.id
                    },
                    method: 'get',
                }).then(e => {
                    this.posterLoading = false;
                    if (e.data.code == 0) {
                        this.sendData.name = e.data.data.name;
                        this.sendData.key_word = e.data.data.key_word;

                        this.sendData.share.bg_pic = e.data.data.poster_content.bg_pic;
                        this.sendData.share.frame = e.data.data.poster_content.frame;
                        this.sendData.share.qr_code = e.data.data.poster_content.qr_code;
                        if(e.data.data.poster_content.name){
                            this.sendData.share.name = e.data.data.poster_content.name;
                            e.data.data.poster_content.name.font = e.data.data.poster_content.name.font * 1;
                            if (this.sendData.share.name.is_show == 1) {
                                this.select_arr.push(2);
                            }
                        }
                        if(e.data.data.poster_content.memberid) {
                            this.sendData.share.memberid = e.data.data.poster_content.memberid;
                            e.data.data.poster_content.memberid.font = e.data.data.poster_content.memberid.font * 1;
                            if (this.sendData.share.memberid.is_show == 1) {
                                this.select_arr.push(4);
                            }
                        }
                        if(e.data.data.poster_content.head){
                            this.sendData.share.head = e.data.data.poster_content.head;
                            if (this.sendData.share.head.is_show == 1) {
                                this.select_arr.push(1);
                            }
                        }
                        if (this.sendData.share.qr_code.is_show == 1) {
                            this.select_arr.push(3);
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                });
            },
            savePoster() {
                if (this.sendData.name == '') {
                    this.$message.error('请输入海报名称');
                    return;
                }
                if (this.sendData.share.bg_pic.url == '') {
                    this.$message.error('请添加海报背景');
                    return;
                }

                if (this.sendData.share.bg_pic.url) {
                    this.sendData.share.bg_pic.is_show = 1;
                } else {
                    this.sendData.share.bg_pic.is_show = 0;
                }
                this.select_arr.forEach((item, index) => {
                    if (item == 1) {
                        this.sendData.share.head.is_show = 1;
                    } else if (item == 2) {
                        this.sendData.share.name.is_show = 1;
                    } else if (item == 3) {
                        this.sendData.share.qr_code.is_show = 1;
                    } else if (item == 4) {
                        this.sendData.share.memberid.is_show = 1;
                    }
                })

                if (!this.sendData.share.qr_code.is_show) {
                    this.$message.error('请添加二维码');
                    return;
                }

                // 计算百分比
                let share = this.sendData.share;
                for (let key in share) {
                    if (key == 'bg_pic') {
                        let img = document.getElementsByClassName("main_content_img");
                        this.sendData.share[key].width = img[0].width;
                        this.sendData.share[key].height = img[0].height;
                    } else {
                        this.sendData.share[key].top_ratio = Math.floor(share[key].top / share[key].max_top * 100) / 100;
                        this.sendData.share[key].left_ratio = Math.floor(share[key].left / share[key].max_left * 100) / 100;
                    }
                }
                this.sendData.share.frame = {width: 750, height: 1334};
                var obj = {
                    poster_content: {
                        share: ''
                    },
                    name: '',
                    key_word: '',
                    id: this.id
                };
                obj.poster_content.share = this.sendData.share;
                obj.name = this.sendData.name;
                obj.key_word = this.sendData.key_word;
                obj.share_url = this.sendData.share.bg_pic.url;

                this.posterLoading = true;
                this.select_arr.forEach((item,index) =>{
                    if (this.select_arr.indexOf(1) == -1) {
                        delete obj.poster_content.share.head
                    }
                    if(this.select_arr.indexOf(2) == -1){
                        delete obj.poster_content.share.name
                    }
                })
                this.$request({
                    params: {
                        r: 'share-redpack/default/edit',
                    },
                    method: 'post',
                    data: obj
                }).then(e => {
                    this.posterLoading = false;
                    if (e.data.code == 0) {
                        this.$message({
                            message: '保存成功!',
                            type: 'success'
                        });
                        setTimeout(() => {
                            this.$navigate({
                                r: 'share-redpack/default/index'
                            })
                        }, 1000)
                    } else {
                        this.$message.error(e.data.msg);
                    }
                });

            },
            attarController(e, str) { //属性控制器
                if (str == 'avatarSize') {
                    this.avatar_max_top = 1334 - (e + 4);
                    this.avatar_max_left = 750 - e;
                    this.sendData.share.head.max_top = this.avatar_max_top;
                    this.sendData.share.head.max_left = this.avatar_max_left;
                } else if (str == 'nameSize') {
                    this.avatar_max_top = 1334 - (this.$refs.nameAttr.offsetHeight + 4);
                    this.avatar_max_left = 750 - this.$refs.nameAttr.offsetWidth - 4;
                    this.sendData.share.name.max_top = this.avatar_max_top;
                    this.sendData.share.name.max_left = this.avatar_max_left;
                    this.sendData.share.memberid.max_top = this.avatar_max_top;
                    this.sendData.share.memberid.max_left = this.avatar_max_left;
                } else {
                    this.avatar_max_top = 1334 - e;
                    this.avatar_max_left = 750 - e;
                    this.sendData.share.qr_code.max_top = this.avatar_max_top;
                    this.sendData.share.qr_code.max_left = this.avatar_max_left;
                }
            },
            selectItem(num) { //选中了哪一个海报属性
                console.log('xaunzhong ', num, this.sendData.share)

                this.select_index = num;
                if (JSON.stringify(this.select_arr).indexOf(num) == -1) {
                    this.select_arr.push(num);
                }
                console.log(this.sendData.share.name.top,'share3')
            },
            deleteSelect(num) { //删除所选择的属性
                this.select_arr.forEach((item, index) => {
                    if (item == num) {
                        this.select_arr.splice(index, 1);
                        if (num == 1) {
                            this.sendData.share.head.is_show = 0;
                        } else if (num == 2) {
                            this.sendData.share.name.is_show = 0;
                        } else if (num == 3) {
                            this.sendData.share.qr_code.is_show = 0;
                        }
                    }
                })
                if (this.select_index == num) {
                    this.select_index = 0;
                }
            },
            beginAddImg(e) {
                if (e[0]) { //判断图片是否正在上传
                    this.addImgLoad = true;
                }
            },
            handleSuccess(e) { //图片上传成功
                this.sendData.share.bg_pic.url = e.response.data.data.url;
                this.addImgLoad = false;
                this.$message({
                    message: '图片上传成功！',
                    type: 'success'
                });
            }
        }
    })
</script>

<style scoped>

    img {
        display: block;
    }

    .el-menu-item:hover {
        background: #ffffff !important;
    }

    .el-submenu__title:hover {
        background: #ffffff !important;
    }

    .header_box {
        border-radius: 5px 5px 0 0;
        color: #808695;
    }

    .add_temp_box {
        margin-bottom: 10px;
    }

    .el-tabs__header {
        margin: 0;
    }

    .el-tabs__item {
        height: 70px;
        line-height: 70px;
        width: 96px;
        text-align: center;
        padding: 0;
    }

    .el-tabs__active-bar {
        width: 96px !important;
        height: 4px;
    }

    .template_data_left_title {
        margin-right: 13px;
    }

    .el-input {
        height: 40px;
        width: 229px;
    }

    .main_box {
        background: #fff;
        padding: 0 25px 25px;
    }

    .main_img_box {
        width: 376px;
        height: 760px;
        position: relative;
        margin-right: 48px;
    }

    .main_img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .main_content {
        background: #ffffff;
        width: 750px;
        height: 1334px;
        position: absolute;
        top: 137px;
        left: 49.1%;
        transform: translateX(-50%);
        border-radius: 0 0 77px 74px;
        scrollbar-width: none;
        zoom: 0.464;
        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .main_content_img {
        width: 100%;
    }

    .add_img_title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 30px;
    }

    .add_img_text {
        margin-right: 30px;
        color: #606266;
    }

    .edit_box .el-button {
        width: 158px;
        height: 35px;
        padding: 10px 20px;
    }

    .edit_box {
        padding-top: 40px;
    }

    .btn_list_box {
        margin: 40px 0;
        padding-bottom: 30px;
        width: 500px;
        border-bottom: 1px solid #F1F1F1;
    }

    .btn_list {
        border-radius: 5px;
        width: 80px;
        height: 80px;
        border: 2px solid #C5C8CE;
        position: relative;
        margin-right: 26px;
        cursor: pointer;
    }

    .btn_active {
        border: 2px solid #2DB7F5;
        background: #CBF3FF;
    }

    .btn_icon {
        color: #C5C8CE;
        font-size: 45px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .btn_icon_close {
        position: absolute;
        right: 3px;
        top: 4px;
        color: #C5C8CE;
    }

    .btn_icon_close_active {
        color: #2DB7F5;
    }

    .set_title {
        font-weight: 700;
        color: #515A6E;
        font-size: 14px;
        margin-bottom: 19px;
    }

    .slider_title {
        width: 56px;
        text-align: right;
        margin-right: 17px;
        color: #606266;
    }

    .diy_avatar {
        position: absolute;
        color: #C5C8CE;
    }

    .save_btn {
        margin-top: 80px;
    }

    /* 修改原生element滑块的样式 */
    .el-input-number.is-without-controls .el-input__inner {
        padding-left: 10px;
        padding-right: 10px;
    }

    .el-input--small .el-input__inner {
        height: 20px;
        line-height: 20px;
    }

    .el-input-number .el-input {
        display: block;
        width: 45px;
        height: 20px;
        font-size: 12px;
    }

    .el-slider__button {
        width: 10px;
        height: 10px;
        border: 1px solid #03C5FF;
    }

    .el-slider__button-wrapper {
        top: -17px;
    }

    .el-slider__runway {
        height: 2px;
    }

    .el-slider__input {
        margin-top: 0;
    }

    .el-slider__bar {
        height: 3px;
    }


    /* 修改原生element颜色选择器样式 */
    .el-color-picker__trigger {
        border-radius: 50%;
        height: 30px;
        width: 30px;
        padding: 3px;
    }

    .el-color-picker__color {
        border: 0px;
    }

    .el-color-picker__icon {
        display: none;
    }

    .el-color-picker__color-inner {
        border-radius: 50%;
    }

    /* 公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .over2 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .pagination {
        width: 100%;
        flex-direction: row-reverse;
    }

    .default_tips {
        text-align: center;
        margin-top: 200px;
        color: #D0D2D6;
        font-size: 35px;
    }
</style>