intellioa
/
super-fusion-platform
mirror of http://10.10.14.221/feiliming/oa-project-vue.git
6
0
Fork 0
Code Issues Projects Releases Wiki Activity

洋浦学校八大中心 德育管理前端

Browse Source
init
gongdi 3 years ago
parent 9ff377bc05
commit e949dd3496
3 changed files with 479 additions and 392 deletions
Show Stats Download Patch File Download Diff File

2
src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle.vue
Unescape View File

@ -35,7 +35,7 @@
}
},
mounted(){
this.changeType();
// this.changeType();
},
methods: {
changeType:function () {

28
src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle/studentInfo.vue
Unescape View File

@ -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>

841
src/views/screenAdaptation/pages/monitorCenter/schoolDaily/schoolStyle/studentStyle.vue
Unescape View File

@ -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;
}
}
}
}
}

Write Preview
Loading…
Cancel
Save