From e949dd349690d32766aae2e6484126fd09fe7130 Mon Sep 17 00:00:00 2001
From: gongdi <410827992@qq.com>
Date: Wed, 19 Oct 2022 16:43:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=8B=E6=B5=A6=E5=AD=A6=E6=A0=A1=E5=85=AB?=
 =?UTF-8?q?=E5=A4=A7=E4=B8=AD=E5=BF=83=20=E5=BE=B7=E8=82=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=89=8D=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../monitorCenter/schoolDaily/schoolStyle.vue |   2 +-
 .../schoolDaily/schoolStyle/studentInfo.vue   |  28 +-
 .../schoolDaily/schoolStyle/studentStyle.vue  | 841 ++++++++++--------
 3 files changed, 479 insertions(+), 392 deletions(-)

diff --git a/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle.vue b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle.vue
index ae15a23..918e291 100644
--- a/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle.vue
+++ b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle.vue
@@ -35,7 +35,7 @@
             }
         },
         mounted(){
-            this.changeType();
+           // this.changeType();
         },
         methods: {
             changeType:function () {
diff --git a/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle/studentInfo.vue b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle/studentInfo.vue
index facb634..60c96f9 100644
--- a/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle/studentInfo.vue
+++ b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle/studentInfo.vue
@@ -1,23 +1,37 @@
 <template>
     <div class="student-style-info-style">
-        <div class="student-img-style"><img :src="studentInfo.imgSrc"/></div>
+        <div class="student-img-style">
+            <img-preview :imgObj="imgJson"/>
+        </div>
         <div class="student-info-style">
-            <div class="student-info-text-style">{{studentInfo.name}}</div>
-            <div class="student-info-text-style light-text-style">{{studentInfo.gradeName}}</div>
-            <div class="student-info-text-style light-text-style">{{studentInfo.className}}</div>
+            <div class="student-info-text-style">{{studentInfo.honor_person_name}}</div>
+            <div class="student-info-text-style light-text-style">{{studentInfo.stage_name}}</div>
+            <div class="student-info-text-style light-text-style">{{studentInfo.class_name}}</div>
         </div>
     </div>
 </template>
 <script>
+    import ImgPreview from '../../../../common/imgPreview.vue';
     export default{
-        data(){
-            return {}
-        },
         props:{
             studentInfo:{
                 type:Object,
                 default:{}
             }
+        },
+        data(){
+            return {
+                imgJson:{}
+            }
+        },
+        mounted(){
+            let attachmentJson = this.$props.studentInfo.attachment_json;
+            if(attachmentJson && attachmentJson.length > 0){
+                this.imgJson = JSON.parse(attachmentJson)[0];
+            }
+        },
+        components:{
+            ImgPreview
         }
     }
 </script>
diff --git a/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle/studentStyle.vue b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle/studentStyle.vue
index 64bd2f2..0efe86d 100644
--- a/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle/studentStyle.vue
+++ b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle/studentStyle.vue
@@ -1,50 +1,49 @@
 <template>
     <div class="school-style-student-style">
-        <div class="list-row-style">
-            <div class="top-line-style" style="float: right">
-                <div class="shine shine2"></div>
-                <div class="star-style">
-                    <img src="../../../../assets/images/star.png" style="width: 100%;height: 100%"/>
+        <vue-scroll :ops="listScroll" style="height:520px"
+                    class="list-data-content-row-style">
+            <div v-for="item,index in dataList" :key="'category_'+item.category_id" class="list-row-style">
+                <div :class="(index % 2 === 0?'top-line-style':'line-left-style')"
+                     :style="(index % 2 === 0?'float: right':'')">
+                    <div class="shine shine2"></div>
+                    <div class="star-style">
+                        <img src="../../../../assets/images/star.png" style="width: 100%;height: 100%"/>
+                    </div>
                 </div>
-            </div>
-            <div class="list-content-style">
-                <div class="list-medal-style">
-                    <img src="../../../../assets/images/medal.png" style="width: 100%;height: 100%"/>
-                    <div class="medal-text-style">学雷锋<br/>标兵</div>
-                </div>
-                <StudentInfo v-for="item in studentList1" :key="item.id" :studentInfo="item"/>
-            </div>
-        </div>
-        <div class="list-row-style">
-            <div class="line-left-style">
-                <div class="shine shine2"></div>
-                <div class="star-style">
-                    <img src="../../../../assets/images/star.png" style="width: 100%;height: 100%"/>
-                </div>
-            </div>
-            <div class="list-content-style">
-                <StudentInfo v-for="item in studentList2" :key="item.id" :studentInfo="item"/>
-                <div class="list-medal-style">
-                    <img src="../../../../assets/images/medal.png" style="width: 100%;height: 100%"/>
-                    <div class="medal-text-style">优秀<br/>少先队</div>
+                <div class="list-content-style">
+                    <template v-if="index % 2 === 0">
+                        <div class="list-medal-style">
+                            <img src="../../../../assets/images/medal.png" style="width: 100%;height: 100%"/>
+                            <div class="medal-text-style">{{item.category_name}}</div>
+                        </div>
+                        <div class="swiper-content-style">
+                            <swiper id="mySwiper" :options="swiperOption" ref="mySwiper">
+                                <swiper-slide class="swiper-item divcard swiper-slide"
+                                              v-for='(student,index) in item.list' :key='item.category_id + "_" + index'>
+                                    <!--<StudentInfo v-for="student in item.list" :key="item.id" :studentInfo="student"/>-->
+                                    <StudentInfo  :studentInfo="student"/>
+                                </swiper-slide>
+                            </swiper>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="swiper-content-style">
+                            <swiper id="myOtherSwiper" :options="swiperOption" ref="mySwiper">
+                                <swiper-slide class="swiper-item divcard swiper-slide"
+                                              v-for='(student,index) in item.list' :key='item.category_id + "_" + index'>
+                                    <!--<StudentInfo v-for="student in item.list" :key="item.id" :studentInfo="student"/>-->
+                                    <StudentInfo  :studentInfo="student"/>
+                                </swiper-slide>
+                            </swiper>
+                        </div>
+                        <div class="list-medal-style">
+                            <img src="../../../../assets/images/medal.png" style="width: 100%;height: 100%"/>
+                            <div class="medal-text-style">{{item.category_name}}</div>
+                        </div>
+                    </template>
                 </div>
             </div>
-        </div>
-        <div class="list-row-style">
-            <div class="top-line-style" style="float: right">
-                <div class="shine shine2"></div>
-                <div class="star-style">
-                    <img src="../../../../assets/images/star.png" style="width: 100%;height: 100%"/>
-                </div>
-            </div>
-            <div class="list-content-style">
-                <div class="list-medal-style">
-                    <img src="../../../../assets/images/medal.png" style="width: 100%;height: 100%"/>
-                    <div class="medal-text-style">三好<br/>学生</div>
-                </div>
-                <StudentInfo v-for="item in studentList3" :key="item.id" :studentInfo="item"/>
-            </div>
-        </div>
+        </vue-scroll>
     </div>
 </template>
 <script>
@@ -53,31 +52,88 @@
      * */
     import {Icon} from 'ant-design-vue';
     import StudentInfo from './studentInfo.vue';
+    import InterConfig from '../../../adminCenter/servicePlatform/interConfig';
+    import {swiper, swiperSlide} from 'vue-awesome-swiper'
+    import 'swiper/dist/css/swiper.css'
     export default{
         data(){
             return {
-                studentList1:[
-                    {id:1,name:"姜子谦",gradeName:"小学一年级",className:"05班",imgSrc:require('../../../../assets/images/student/student01.svg')},
-                    {id:1,name:"赵雪娇",gradeName:"小学三年级",className:"01班",imgSrc:require('../../../../assets/images/student/student02.svg')},
-                    {id:3,name:"孙泽熙",gradeName:"小学三年级",className:"03班",imgSrc:require('../../../../assets/images/student/student03.svg')},
-                    {id:4,name:"谢子欣",gradeName:"初中一年级",className:"05班",imgSrc:require('../../../../assets/images/student/student04.svg')},
-                ],
-                studentList2:[
-                    {id:1,name:"蒋一鸣",gradeName:"小学一年级",className:"05班",imgSrc:require('../../../../assets/images/student/student05.svg')},
-                    {id:1,name:"王子墨",gradeName:"小学一年级",className:"05班",imgSrc:require('../../../../assets/images/student/student06.svg')},
-                    {id:3,name:"冉冉",gradeName:"小学三年级",className:"01班",imgSrc:require('../../../../assets/images/student/student07.svg')},
-                    {id:4,name:"贺飞",gradeName:"小学一年级",className:"06班",imgSrc:require('../../../../assets/images/student/student08.svg')},
-                ],
-                studentList3:[
-                    {id:1,name:"徐子乔",gradeName:"小学一年级",className:"05班",imgSrc:require('../../../../assets/images/student/student09.svg')},
-                    {id:1,name:"范然",gradeName:"小学三年级",className:"01班",imgSrc:require('../../../../assets/images/student/student10.svg')},
-                    {id:3,name:"张雪飞",gradeName:"小学四年级",className:"01班",imgSrc:require('../../../../assets/images/student/student11.svg')},
-                    {id:4,name:"刘西蒙",gradeName:"小学二年级",className:"01班",imgSrc:require('../../../../assets/images/student/student12.svg')},
-                ]
+                dataList: [],
+                listScroll: this.StaticParams.scrollOption,
+                swiperOption: {
+                    initialSlide: 0,//默认第几张
+                    loop: true, //循环
+                    autoplay: true, //每张播放时长3秒，自动播放
+                    speed: 800,//滑动速度
+                    slidesPerView: 4,
+                    observer:true,
+                    observeParents:false,
+                },
+            }
+        },
+        mounted(){
+            this.getStudentHonorList();
+        },
+        methods: {
+            //获取学生荣誉集合
+            getStudentHonorList: function () {
+                this.dataList = [];
+                let param = {
+                    bureau_id: this.BaseConfig.person_info_my.bureau_id,
+                    category_type: 6,
+                    category_id: "",
+                    page_number: 1,
+                    page_size: 999999
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.getHonorList.url,
+                    params: param,
+                    method: InterConfig.getHonorList.method,
+                    isTestLogin: InterConfig.getHonorList.isTestLogin,
+                }], (result) => {
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        let dataList = resData.data.list;
+                        for (let i = 0, len = dataList.length; i < len; i++) {
+                            let category_id = dataList[i].category_id;
+                            let category_name = dataList[i].category_name;
+                            let index = -1;
+                            for (let j = 0, len = this.dataList.length; j < len; j++) {
+                                let categoryId = this.dataList[j]["category_id"];
+                                if (parseInt(categoryId) === parseInt(category_id)) {
+                                    index = j;
+                                    break;
+                                }
+                            }
+                            let categoryObj = {};
+                            console.log("index:", index)
+                            if (index > -1) {
+                                //存在
+                                this.dataList[index]["list"].push(dataList[i]);
+                            } else {
+                                //不存在
+                                categoryObj["category_id"] = category_id;
+                                categoryObj["category_name"] = category_name;
+                                categoryObj["list"] = [dataList[i]];
+                                this.dataList.push(categoryObj);
+                            }
+                        }
+                        //轮播追加数据
+                        for(let i = 0,len = this.dataList.length;i < len;i ++){
+                            let list = this.dataList[i].list;
+                            if(list.length > 4 && list.length < 10){
+                                this.dataList[i].list.push(...this.dataList[i].list);
+                            }
+                        }
+                        console.log("this.dataList：", this.dataList);
+                    }
+                })
             }
         },
         components: {
-            StudentInfo
+            StudentInfo,
+            swiper,
+            swiperSlide,
         }
     }
 </script>
@@ -87,330 +143,347 @@
         height: 520px;
         display: flex;
         flex-direction: column;
-        .list-row-style {
+        .list-data-content-row-style{
             width: 100%;
-            .top-line-style {
-                margin-top: 10px;
-                width: 80%;
-                border-bottom: 1px solid white;
-                opacity: 0.5;
-                position: relative;
-                .star {
-                    display: block;
-                    width: 5px;
-                    height: 5px;
-                    border-radius: 50%;
-                    background: #fff;
-                    top: 100px;
-                    left: 500px;
-                    position: relative;
-                    transform-origin: 100% 0;
-                    animation: star-ani 4s linear infinite;
-                    -webkit-animation: star-ani 5s linear infinite;
-                    box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
-                    opacity: 0;
-                    z-index: 2;
-                }
-                .star:after {
-                    content: "";
-                    display: block;
-                    top: 0px;
-                    left: 4px;
-                    border: 0px solid #fff;
-                    border-width: 0px 90px 2px 90px;
-                    border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
-                    transform: rotate(-45deg) translate3d(1px, 3px, 0);
-                    box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
-                    transform-origin: 0% 100%;
-                }
-                .pink {
-                    top: 100px;
-                    left: 800px;
-                    background: #fff;
-                    animation-delay: 3s;
-                    -webkit-animation-delay: 3s;
-                    -moz-animation-delay: 3s;
-                }
-                .pink:after {
-                    border-color: transparent transparent transparent #fff;
-                    animation-delay: 3s;
-                    -webkit-animation-delay: 3s;
-                    -moz-animation-delay: 3s;
-                }
-                .blue {
-                    top: 120px;
-                    left: 1200px;
-                    background: fff;
-                    animation-delay: 7s;
-                    -webkit-animation-delay: 7s;
-                    -moz-animation-delay: 7s;
-                }
-                .blue:after {
-                    border-color: transparent transparent transparent fff;
-                    -webkit-animation-delay: 7s;
-                    -moz-animation-delay: 7s;
-                    animation-delay: 7s;
-                }
-                @keyframes star-ani {
-                    0% {
-                        opacity: 0;
-                        transform: scale(0) translate3d(0, 0, 0);
-                    }
-                    20% {
-                        opacity: 0.8;
-                        transform: scale(0.2) translate3d(-100px, 100px, 0);
-                    }
-                    40% {
-                        opacity: 0.8;
-                        transform: scale(0.4) translate3d(-200px, 200px, 0);
-                    }
-                    60% {
-                        opacity: 0.8;
-                        transform: scale(0.6) translate3d(-300px, 300px, 0);
-                    }
-                    80% {
-                        opacity: 1;
-                        transform: scale(1) translate3d(-350px, 350px, 0);
-                    }
-                    100% {
-                        opacity: 1;
-                        transform: scale(1.2) translate3d(-400px, 380px, 0);
-                    }
-                }
-                .star-style {
-                    /*background-image: url("https://sucai.suoluomei.cn/sucai_zs/images/20201211172037-211357_VOTl_3549294.png");*/
-                    /*background-repeat: no-repeat;*/
-                    /*background-position: center;*/
-                    width: 80px;
-                    height: 80px;
-                    position: absolute;
-                    animation: opacity-change 1s ease-in-out infinite;
-                    -webkit-animation: opacity-change 1s ease-in-out infinite;
-                    -moz-animation: opacity-change 1s ease-in-out infinite;
-                    -o-animation: opacity-change 1s ease-in-out infinite;
-                    top: -40px;
-                    left: -40px;
-                }
-                .shine2 {
-                    animation: opacity-change 1.75s ease-in-out infinite;
-                    -webkit-animation: opacity-change 1.75s ease-in-out infinite;
-                    -moz-animation: opacity-change 1.75s ease-in-out infinite;
-                    -o-animation: opacity-change 1.75s ease-in-out infinite;
-                }
-                @keyframes opacity-change {
-                    0% {
-                        opacity: 0;
-                    }
-                    50% {
-                        opacity: 1;
-                    }
-                    100% {
-                        opacity: 0;
-                    }
-                }
-                @-webkit-keyframes opacity-change {
-                    0% {
-                        opacity: 0;
-                    }
-                    50% {
-                        opacity: 1;
-                    }
-                    100% {
-                        opacity: 0;
-                    }
-                }
-                @-moz-keyframes opacity-change {
-                    0% {
-                        opacity: 0;
-                    }
-                    50% {
-                        opacity: 1;
-                    }
-                    100% {
-                        opacity: 0;
-                    }
-                }
-                @-o-keyframes opacity-change {
-                    0% {
-                        opacity: 0;
-                    }
-                    50% {
-                        opacity: 1;
-                    }
-                    100% {
-                        opacity: 0;
-                    }
-                }
-            }
-            .line-left-style{
-                margin-top: 10px;
-                width: 80%;
-                border-bottom: 1px solid white;
-                opacity: 0.5;
-                position: relative;
-                .star {
-                    display: block;
-                    width: 5px;
-                    height: 5px;
-                    border-radius: 50%;
-                    background: #fff;
-                    top: 100px;
-                    left: 500px;
-                    position: relative;
-                    transform-origin: 100% 0;
-                    animation: star-ani 4s linear infinite;
-                    -webkit-animation: star-ani 5s linear infinite;
-                    box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
-                    opacity: 0;
-                    z-index: 2;
-                }
-                .star:after {
-                    content: "";
-                    display: block;
-                    top: 0px;
-                    left: 4px;
-                    border: 0px solid #fff;
-                    border-width: 0px 90px 2px 90px;
-                    border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
-                    transform: rotate(-45deg) translate3d(1px, 3px, 0);
-                    box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
-                    transform-origin: 0% 100%;
-                }
-                .pink {
-                    top: 100px;
-                    left: 800px;
-                    background: #fff;
-                    animation-delay: 3s;
-                    -webkit-animation-delay: 3s;
-                    -moz-animation-delay: 3s;
-                }
-                .pink:after {
-                    border-color: transparent transparent transparent #fff;
-                    animation-delay: 3s;
-                    -webkit-animation-delay: 3s;
-                    -moz-animation-delay: 3s;
-                }
-                .blue {
-                    top: 120px;
-                    left: 1200px;
-                    background: fff;
-                    animation-delay: 7s;
-                    -webkit-animation-delay: 7s;
-                    -moz-animation-delay: 7s;
-                }
-                .blue:after {
-                    border-color: transparent transparent transparent fff;
-                    -webkit-animation-delay: 7s;
-                    -moz-animation-delay: 7s;
-                    animation-delay: 7s;
-                }
-                @keyframes star-ani {
-                    0% {
-                        opacity: 0;
-                        transform: scale(0) translate3d(0, 0, 0);
-                    }
-                    20% {
-                        opacity: 0.8;
-                        transform: scale(0.2) translate3d(-100px, 100px, 0);
-                    }
-                    40% {
-                        opacity: 0.8;
-                        transform: scale(0.4) translate3d(-200px, 200px, 0);
-                    }
-                    60% {
-                        opacity: 0.8;
-                        transform: scale(0.6) translate3d(-300px, 300px, 0);
-                    }
-                    80% {
-                        opacity: 1;
-                        transform: scale(1) translate3d(-350px, 350px, 0);
-                    }
-                    100% {
-                        opacity: 1;
-                        transform: scale(1.2) translate3d(-400px, 380px, 0);
-                    }
-                }
-                .star-style {
-                    /*background-image: url("https://sucai.suoluomei.cn/sucai_zs/images/20201211172037-211357_VOTl_3549294.png");*/
-                    /*background-repeat: no-repeat;*/
-                    /*background-position: center;*/
-                    width: 80px;
-                    height: 80px;
-                    position: absolute;
-                    animation: opacity-change 1s ease-in-out infinite;
-                    -webkit-animation: opacity-change 1s ease-in-out infinite;
-                    -moz-animation: opacity-change 1s ease-in-out infinite;
-                    -o-animation: opacity-change 1s ease-in-out infinite;
-                    top: -40px;
-                    right: -40px;
-                }
-                .shine2 {
-                    animation: opacity-change 1.75s ease-in-out infinite;
-                    -webkit-animation: opacity-change 1.75s ease-in-out infinite;
-                    -moz-animation: opacity-change 1.75s ease-in-out infinite;
-                    -o-animation: opacity-change 1.75s ease-in-out infinite;
-                }
-                @keyframes opacity-change {
-                    0% {
-                        opacity: 0;
-                    }
-                    50% {
-                        opacity: 1;
-                    }
-                    100% {
-                        opacity: 0;
-                    }
-                }
-                @-webkit-keyframes opacity-change {
-                    0% {
-                        opacity: 0;
-                    }
-                    50% {
-                        opacity: 1;
-                    }
-                    100% {
-                        opacity: 0;
-                    }
-                }
-                @-moz-keyframes opacity-change {
-                    0% {
-                        opacity: 0;
-                    }
-                    50% {
-                        opacity: 1;
-                    }
-                    100% {
-                        opacity: 0;
-                    }
-                }
-                @-o-keyframes opacity-change {
-                    0% {
-                        opacity: 0;
-                    }
-                    50% {
-                        opacity: 1;
-                    }
-                    100% {
-                        opacity: 0;
-                    }
-                }
-            }
-            .list-content-style{
-                width: 100%;
-                display: flex;
-                padding: 10px;
-                align-items: center;
-                .list-medal-style{
-                    width: 100px;
-                    height: 100px;
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    .medal-text-style{
-                        color: white;
-                        position: absolute;
-                        text-align: center;
+            /deep/.__panel{
+                width: 100% !important;
+                overflow: hidden !important;
+                .__view{
+                    width: 100% !important;
+                    .list-row-style {
+                        width: 100%;
+                        .top-line-style {
+                            margin-top: 10px;
+                            width: 80%;
+                            border-bottom: 1px solid white;
+                            opacity: 0.5;
+                            position: relative;
+                            .star {
+                                display: block;
+                                width: 5px;
+                                height: 5px;
+                                border-radius: 50%;
+                                background: #fff;
+                                top: 100px;
+                                left: 500px;
+                                position: relative;
+                                transform-origin: 100% 0;
+                                animation: star-ani 4s linear infinite;
+                                -webkit-animation: star-ani 5s linear infinite;
+                                box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
+                                opacity: 0;
+                                z-index: 2;
+                            }
+                            .star:after {
+                                content: "";
+                                display: block;
+                                top: 0px;
+                                left: 4px;
+                                border: 0px solid #fff;
+                                border-width: 0px 90px 2px 90px;
+                                border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
+                                transform: rotate(-45deg) translate3d(1px, 3px, 0);
+                                box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
+                                transform-origin: 0% 100%;
+                            }
+                            .pink {
+                                top: 100px;
+                                left: 800px;
+                                background: #fff;
+                                animation-delay: 3s;
+                                -webkit-animation-delay: 3s;
+                                -moz-animation-delay: 3s;
+                            }
+                            .pink:after {
+                                border-color: transparent transparent transparent #fff;
+                                animation-delay: 3s;
+                                -webkit-animation-delay: 3s;
+                                -moz-animation-delay: 3s;
+                            }
+                            .blue {
+                                top: 120px;
+                                left: 1200px;
+                                background: fff;
+                                animation-delay: 7s;
+                                -webkit-animation-delay: 7s;
+                                -moz-animation-delay: 7s;
+                            }
+                            .blue:after {
+                                border-color: transparent transparent transparent fff;
+                                -webkit-animation-delay: 7s;
+                                -moz-animation-delay: 7s;
+                                animation-delay: 7s;
+                            }
+                            @keyframes star-ani {
+                                0% {
+                                    opacity: 0;
+                                    transform: scale(0) translate3d(0, 0, 0);
+                                }
+                                20% {
+                                    opacity: 0.8;
+                                    transform: scale(0.2) translate3d(-100px, 100px, 0);
+                                }
+                                40% {
+                                    opacity: 0.8;
+                                    transform: scale(0.4) translate3d(-200px, 200px, 0);
+                                }
+                                60% {
+                                    opacity: 0.8;
+                                    transform: scale(0.6) translate3d(-300px, 300px, 0);
+                                }
+                                80% {
+                                    opacity: 1;
+                                    transform: scale(1) translate3d(-350px, 350px, 0);
+                                }
+                                100% {
+                                    opacity: 1;
+                                    transform: scale(1.2) translate3d(-400px, 380px, 0);
+                                }
+                            }
+                            .star-style {
+                                /*background-image: url("https://sucai.suoluomei.cn/sucai_zs/images/20201211172037-211357_VOTl_3549294.png");*/
+                                /*background-repeat: no-repeat;*/
+                                /*background-position: center;*/
+                                width: 80px;
+                                height: 80px;
+                                position: absolute;
+                                animation: opacity-change 1s ease-in-out infinite;
+                                -webkit-animation: opacity-change 1s ease-in-out infinite;
+                                -moz-animation: opacity-change 1s ease-in-out infinite;
+                                -o-animation: opacity-change 1s ease-in-out infinite;
+                                top: -40px;
+                                left: -40px;
+                            }
+                            .shine2 {
+                                animation: opacity-change 1.75s ease-in-out infinite;
+                                -webkit-animation: opacity-change 1.75s ease-in-out infinite;
+                                -moz-animation: opacity-change 1.75s ease-in-out infinite;
+                                -o-animation: opacity-change 1.75s ease-in-out infinite;
+                            }
+                            @keyframes opacity-change {
+                                0% {
+                                    opacity: 0;
+                                }
+                                50% {
+                                    opacity: 1;
+                                }
+                                100% {
+                                    opacity: 0;
+                                }
+                            }
+                            @-webkit-keyframes opacity-change {
+                                0% {
+                                    opacity: 0;
+                                }
+                                50% {
+                                    opacity: 1;
+                                }
+                                100% {
+                                    opacity: 0;
+                                }
+                            }
+                            @-moz-keyframes opacity-change {
+                                0% {
+                                    opacity: 0;
+                                }
+                                50% {
+                                    opacity: 1;
+                                }
+                                100% {
+                                    opacity: 0;
+                                }
+                            }
+                            @-o-keyframes opacity-change {
+                                0% {
+                                    opacity: 0;
+                                }
+                                50% {
+                                    opacity: 1;
+                                }
+                                100% {
+                                    opacity: 0;
+                                }
+                            }
+                        }
+                        .line-left-style {
+                            margin-top: 10px;
+                            width: 80%;
+                            border-bottom: 1px solid white;
+                            opacity: 0.5;
+                            position: relative;
+                            .star {
+                                display: block;
+                                width: 5px;
+                                height: 5px;
+                                border-radius: 50%;
+                                background: #fff;
+                                top: 100px;
+                                left: 500px;
+                                position: relative;
+                                transform-origin: 100% 0;
+                                animation: star-ani 4s linear infinite;
+                                -webkit-animation: star-ani 5s linear infinite;
+                                box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
+                                opacity: 0;
+                                z-index: 2;
+                            }
+                            .star:after {
+                                content: "";
+                                display: block;
+                                top: 0px;
+                                left: 4px;
+                                border: 0px solid #fff;
+                                border-width: 0px 90px 2px 90px;
+                                border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
+                                transform: rotate(-45deg) translate3d(1px, 3px, 0);
+                                box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
+                                transform-origin: 0% 100%;
+                            }
+                            .pink {
+                                top: 100px;
+                                left: 800px;
+                                background: #fff;
+                                animation-delay: 3s;
+                                -webkit-animation-delay: 3s;
+                                -moz-animation-delay: 3s;
+                            }
+                            .pink:after {
+                                border-color: transparent transparent transparent #fff;
+                                animation-delay: 3s;
+                                -webkit-animation-delay: 3s;
+                                -moz-animation-delay: 3s;
+                            }
+                            .blue {
+                                top: 120px;
+                                left: 1200px;
+                                background: fff;
+                                animation-delay: 7s;
+                                -webkit-animation-delay: 7s;
+                                -moz-animation-delay: 7s;
+                            }
+                            .blue:after {
+                                border-color: transparent transparent transparent fff;
+                                -webkit-animation-delay: 7s;
+                                -moz-animation-delay: 7s;
+                                animation-delay: 7s;
+                            }
+                            @keyframes star-ani {
+                                0% {
+                                    opacity: 0;
+                                    transform: scale(0) translate3d(0, 0, 0);
+                                }
+                                20% {
+                                    opacity: 0.8;
+                                    transform: scale(0.2) translate3d(-100px, 100px, 0);
+                                }
+                                40% {
+                                    opacity: 0.8;
+                                    transform: scale(0.4) translate3d(-200px, 200px, 0);
+                                }
+                                60% {
+                                    opacity: 0.8;
+                                    transform: scale(0.6) translate3d(-300px, 300px, 0);
+                                }
+                                80% {
+                                    opacity: 1;
+                                    transform: scale(1) translate3d(-350px, 350px, 0);
+                                }
+                                100% {
+                                    opacity: 1;
+                                    transform: scale(1.2) translate3d(-400px, 380px, 0);
+                                }
+                            }
+                            .star-style {
+                                /*background-image: url("https://sucai.suoluomei.cn/sucai_zs/images/20201211172037-211357_VOTl_3549294.png");*/
+                                /*background-repeat: no-repeat;*/
+                                /*background-position: center;*/
+                                width: 80px;
+                                height: 80px;
+                                position: absolute;
+                                animation: opacity-change 1s ease-in-out infinite;
+                                -webkit-animation: opacity-change 1s ease-in-out infinite;
+                                -moz-animation: opacity-change 1s ease-in-out infinite;
+                                -o-animation: opacity-change 1s ease-in-out infinite;
+                                top: -40px;
+                                right: -40px;
+                            }
+                            .shine2 {
+                                animation: opacity-change 1.75s ease-in-out infinite;
+                                -webkit-animation: opacity-change 1.75s ease-in-out infinite;
+                                -moz-animation: opacity-change 1.75s ease-in-out infinite;
+                                -o-animation: opacity-change 1.75s ease-in-out infinite;
+                            }
+                            @keyframes opacity-change {
+                                0% {
+                                    opacity: 0;
+                                }
+                                50% {
+                                    opacity: 1;
+                                }
+                                100% {
+                                    opacity: 0;
+                                }
+                            }
+                            @-webkit-keyframes opacity-change {
+                                0% {
+                                    opacity: 0;
+                                }
+                                50% {
+                                    opacity: 1;
+                                }
+                                100% {
+                                    opacity: 0;
+                                }
+                            }
+                            @-moz-keyframes opacity-change {
+                                0% {
+                                    opacity: 0;
+                                }
+                                50% {
+                                    opacity: 1;
+                                }
+                                100% {
+                                    opacity: 0;
+                                }
+                            }
+                            @-o-keyframes opacity-change {
+                                0% {
+                                    opacity: 0;
+                                }
+                                50% {
+                                    opacity: 1;
+                                }
+                                100% {
+                                    opacity: 0;
+                                }
+                            }
+                        }
+                        .list-content-style {
+                            width: 100%;
+                            display: flex;
+                            padding: 10px;
+                            align-items: center;
+                            .list-medal-style {
+                                width: 100px;
+                                height: 100px;
+                                position: relative;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                .medal-text-style {
+                                    color: white;
+                                    position: absolute;
+                                    text-align: center;
+                                    width: 50px;
+                                    height: 40px;
+                                }
+                            }
+                            .swiper-content-style {
+                                width: calc(100% - 100px);
+                                height: 100%;
+                                display: flex;
+                            }
+                        }
                     }
                 }
             }