<script>
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import StaticConstant from "@/common/StaticConstant";
import ImagesConstant from "@/common/ImagesConstant";
import JumpTool from "@/common/js/jumpTool";
import {arrayIsNotEmpty} from "../../../common/util";
import View from "../../component/view/view.vue";
// 路径自行修改
let request = new Request()
export default {
  components: {View},
  computed: {
    JumpTool() {
      return JumpTool
    },
    ImagesConstant() {
      return ImagesConstant
    }
  },
  data() {
    return {
      culturalScore: '',//我的文化分
      professionalScore: '',//我的专业分
      scoreInfo: {},
      category: '文科',//
      schoolInfo: {},//学校信息
      schoolCode: '',//学校编码
      collectStatus: false,
      collectIndex: 0,
      tabs: [{id: 'jbjs', name: '基本介绍'}, {id: 'zlxx', name: '招录信息'}, {id: 'kszy', name: '开设专业'}],
      tab: 'zlxx',
      scrollLeft: 0,
      chartData: {},
      opts: StaticConstant.opts,
      fsxIndex: 0,//分数线选择
      tdxIndex: 0,//投档线选择
      majorList: [],//
      professionalCategoryIndex: 0,//批次专业选择
      professionalCategoryList: StaticConstant.professionalCategoryList,//
      admissionsRegulationsList: [],//招生章程列表
      historyScoreControlLineList: [],//批次线数据
      subjectEvaluationList:[],//第四轮学科评估
    }
  },
  onShow() {
  },
  onLoad(e) {
    if (e.schoolCode) {
      this.schoolCode = e.schoolCode;
    }
    if (e.tab) {
      this.tab = e.tab
    }
    // this.schoolCode = '2090'
    this.getSchoolDetailInfo()

    let scoreInfo = uni.getStorageSync('scoreInfo')
    if (scoreInfo) {
      this.scoreInfo = scoreInfo
      this.culturalScore = scoreInfo.culturalScore
      this.professionalScore = scoreInfo.professionalScore
      this.category = scoreInfo.cognitioPolyclinic
    }
  },
  methods: {
    goto(e) {
      uni.navigateTo({
        url: e
      })
    },
    //查看科研点
    gotoNpee() {
      let url = '/pages/zyb/npee/schoolNpee?schoolId='
      url += this.schoolInfo.id + "&schoolName=" + this.schoolInfo.schoolName
      if (this.schoolInfo.schoolResearchTeaching && this.schoolInfo.schoolResearchTeaching.byzg) {
        url += '&byzg=' + this.schoolInfo.schoolResearchTeaching.byzg
      }
      this.goto(url)
    },
    swichMenu(id) {
      this.currentTab = id
      console.log(id)
      // 滑动swiper后，每个选项距离其父元素最左侧的距离
      this.scrollLeft = 0;
      for (let i = 0; i < id; i++) {
        this.scrollLeft += 60
        console.log(this.scrollLeft, 60, id)
      }
    },
    //获取院校详情
    getSchoolDetailInfo() {
      let that = this
      request.get(ApiConstant.School.schoolInfo, {
        schoolCode: this.schoolCode,
      }).then(r => {
        console.log(r)
        if (r.success) {
          that.schoolInfo = r.result
          //判断是否收藏了
          that.checkCollect()
          //加载 男女比例
          this.loadManData()
          //获取院校开设专业
          this.getSchoolMajorList()
          this.getDoubleFirstPlan()
          this.getSubjectEvaluation()
          //加载 批次线
          //this.getHistoryList()
        }
      }).catch(err => {
      }).finally(() => {
        //获取招生章程
        this.getAdmissionsRegulationsList()
      });
    },
    //收藏院校
    collect() {
      let collectSchoolList = uni.getStorageSync('collectSchoolList')
      console.log(collectSchoolList)
      if (collectSchoolList === undefined || collectSchoolList === null || collectSchoolList === '') {
        collectSchoolList = []
      }
      if (this.collectStatus === true) {
        //取消收藏
        //获取 收藏的学校列表中，当前的index
        this.checkCollect()
        this.collectStatus = false
        //移除
        collectSchoolList.splice(this.collectIndex, 1)
      } else {
        //收藏
        this.collectStatus = true
        collectSchoolList.push(this.schoolInfo)
      }
      uni.setStorageSync('collectSchoolList', collectSchoolList)
    },
    //判断收藏按钮
    checkCollect() {
      let collectSchoolList = uni.getStorageSync('collectSchoolList')
      if (collectSchoolList === undefined || collectSchoolList === null || collectSchoolList === '') {
        collectSchoolList = []
      }
      //遍历 缓存中 收藏的学校列表
      for (let i = 0; i < collectSchoolList.length; i++) {
        if (collectSchoolList[i].id === this.schoolInfo.id) {
          // 有收藏这个
          this.collectStatus = true
          this.collectIndex = i
        }
      }
    },
    //加载男女生饼图
    loadManData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: [{"name": "男生", "value": this.schoolInfo.maleRatio}, {
                "name": "女生", "value": this.schoolInfo.femaleRatio
              }]
            }
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    //获取历年批次线
    getHistoryList() {
      request.get(ApiConstant.Score.historyScoreControlLineList, {
        professionalCategory: this.professionalCategoryList[this.professionalCategoryIndex].value,
        category: this.category,
        pageSize: 999
      }, {showLoad: false}).then(res => {
        if (res.success) {
          this.historyScoreControlLineList = res.result.records
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    getSchoolMajorList() {
      request.get(ApiConstant.Major.schoolMajorList, {
        cognitioPolyclinic: this.category,
        schoolCode: this.schoolCode,
        professionalCategory: this.scoreInfo.professionalCategory
      }, {showLoad: false}).then(res => {
        if (res.success) {
          this.majorList = res.result
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    //获取双万计划
    getDoubleFirstPlan() {
      if (this.schoolInfo && this.schoolInfo.id) {
        request.get(ApiConstant.School.doubleFirstPlan, {
          schoolId: this.schoolInfo.id
        }, {showLoad: false}).then(res => {
          if (res.success) {
            console.log(res)
            this.doubleFirstPlan = res.result
            //如果国家级跟省级 都有，给院校的标签里加一个 双万计划
            if (arrayIsNotEmpty(this.doubleFirstPlan.gjjList) || arrayIsNotEmpty(this.doubleFirstPlan.sjList)) {
              this.schoolInfo.tagsList.push('双万计划')
            }
          }
        }).catch(err => {
        }).finally(() => {
        });
      }
    },
    //获取第四轮学科评估
    getSubjectEvaluation() {
      if (this.schoolInfo && this.schoolInfo.id) {
        request.get(ApiConstant.School.subjectEvaluation, {
          schoolId: this.schoolInfo.id
        }, {showLoad: false}).then(res => {
          if (res.success) {
            console.log(res)
            this.subjectEvaluationList = res.result
          }
        }).catch(err => {
        }).finally(() => {
        });
      }
    },
    //选择批次线下拉
    bindPickerPcxChange(e) {
      this.professionalCategoryIndex = e.detail.value
      this.getHistoryList()
    },
    //选择投档线下拉
    bindPickerTdxChange(e) {
      this.tdxIndex = e.detail.value
    },
    //选择录取分数线下拉
    bindPicker_lqMajorChange(e) {
      this.fsxIndex = e.detail.value
    },
    /*获取招生章程*/
    getAdmissionsRegulationsList() {
      let params = {
        type: StaticConstant.TYPES.admissionsRegulations,
        schoolId: this.schoolInfo.id,
        pageNum: 1,
        pageSize: 5
      }
      request.get(ApiConstant.Article.articlePage, params, {showLoad: false}).then(res => {
        console.log(res)
        if (res.success) {
          this.admissionsRegulationsList = res.result.records
        } else {
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
  }
}
</script>
<template>
  <!--头部-->
  <view class="head">
    <view class="schoolHead">
      <view class="uni-flex flex">
        <view class="flex-item-17 padding30">
          <image :src="schoolInfo.schoolIcon" style="width: 128rpx;height: 128rpx" mode="aspectFill"/>
        </view>
        <view class="flex-item-6" style="margin: 30rpx 0">
          <view class="flex" style="padding-bottom: 20rpx;height: 30rpx;line-height: 30rpx">
            <text class="schoolName">{{ schoolInfo.schoolName }}</text>
          </view>
          <view class="flex" style="padding-bottom: 20rpx;height: 30rpx;line-height: 30rpx">
            <text class="schoolNature" v-if="schoolInfo.schoolNature">{{ schoolInfo.schoolNature }}</text>
            <text class="institutionType" v-if="schoolInfo.institutionType">{{ schoolInfo.institutionType }}类</text>
          </view>

          <view style="display: flex;padding: 0;line-height: 30rpx">
            <view class="tags">
              <view class="tag" v-for="(tag,i) in schoolInfo.tagsList" :key="i">
                <text>{{ tag }}</text>
              </view>
            </view>
          </view>

          <view class="flex">
            <text class="address" v-if="schoolInfo.street">{{ schoolInfo.street }}</text>
          </view>
        </view>
        <view class="flex-item-13">
          <view class="flexWrap">
            <view class="ruanke font-size-mini" v-if="schoolInfo && schoolInfo.arwuRanking">
              <text class="font-weight-b font-size-mini4">{{ schoolInfo.arwuRanking }}</text>
              <br/>
              <text>软科排名</text>
            </view>
          </view>
          <view class="flexWrap marginTopBot20" @click="collect">
            <view class="flexWrap">
              <view class="ruanke font-size-mini">
                <image :src="collectStatus?'/static/icons/shoucang-active.png':'/static/icons/shoucang.png'"
                       class="icon64"/>
                <br/>
                <text>关注院校</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <my-menu :tab="tab" :tab-list="tabs"/>
    </view>
  </view>
  <!--学校概括-->
  <view v-if="tab === 'jbjs'">
    <view class="m-card padding20 margin20">
      <uni-section title="学校介绍" type="line">
        <view class="padding20">
          <view class="content">
            <mote-lines-divide :dt="schoolInfo.baseInfo" :line="3" expandtext="展开" foldhint="收起"/>
          </view>
        </view>
      </uni-section>
    </view>
    <view class="m-card padding20 margin20"
          v-if="doubleFirstPlan && doubleFirstPlan.gjjList && doubleFirstPlan.gjjList.length>0">
      <uni-section title="国家级一流专业" type="line">
        <view class="other-item">
          <view class="historyScoreLineList slateGray">
            <view class="hsl-item" :class="index===0?'not-border':''" v-for="(item,index) in doubleFirstPlan.gjjList"
                  :key="index"
                  @click="goto('/pages/zyb/major/detail?majorCode='+item.majorCode)">
              <view class="other-item">
                <text>{{ item.majorName }}</text>
              </view>
              <view class="other-item right-item">
                <image :src="ImagesConstant.keyboard.arrowRight" class="icon50"/>
              </view>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
    <view class="m-card padding20 margin20"
          v-if="doubleFirstPlan && doubleFirstPlan.sjList && doubleFirstPlan.sjList.length>0">
      <uni-section title="省级一流专业" type="line">
        <view class="other-item">
          <view class="historyScoreLineList slateGray">
            <view class="hsl-item" :class="index===0?'not-border':''" v-for="(item,index) in doubleFirstPlan.sjList"
                  :key="index"
                  @click="goto('/pages/zyb/major/detail?majorCode='+item.majorCode)">
              <view class="other-item">
                <text>{{ item.majorName }}</text>
              </view>
              <view class="other-item right-item">
                <image :src="ImagesConstant.keyboard.arrowRight" class="icon50"/>
              </view>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
    <view class="m-card padding20 margin20"
          v-if="subjectEvaluationList && subjectEvaluationList.length>0">
      <uni-section title="第四轮学科评估" type="line">
        <view class="other-item">
          <view class="historyScoreLineList slateGray">
            <view class="hsl-item" :class="index===0?'not-border':''" v-for="(item,index) in subjectEvaluationList"
                  :key="index">
              <view class="other-item">
                <text>{{ item.subjectName }}</text>
              </view>
              <view class="other-item right-item">
                <text>{{item.evaluationResult}}</text>
<!--                <image :src="ImagesConstant.keyboard.arrowRight" class="icon50"/>-->
              </view>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
    <view class="m-card padding20 margin20">
      <uni-section title="科研教学" type="line">
        <view class="padding20">
          <view class="other-item">
            <view v-if="schoolInfo.schoolResearchTeaching" class="flexWrap kyjx" @click="gotoNpee()">
              <view class="flex-item-25 kyjxTag"
                    v-if="schoolInfo.schoolResearchTeaching && schoolInfo.schoolResearchTeaching.professionalMasterDegreePoint">
                <text>
                  专硕点 {{ schoolInfo.schoolResearchTeaching.professionalMasterDegreePoint }}
                </text>
              </view>
              <view class="flex-item-25 kyjxTag"
                    v-if="schoolInfo.schoolResearchTeaching && schoolInfo.schoolResearchTeaching.academicMasterDegreePoint">
                <text>
                  学硕点 {{ schoolInfo.schoolResearchTeaching.academicMasterDegreePoint }}
                </text>
              </view>
              <view class="flex-item-25 kyjxTag"
                    v-if="schoolInfo.schoolResearchTeaching && schoolInfo.schoolResearchTeaching.doctoralPoint">
                <text>
                  有博士点 <!--{{ schoolInfo.schoolResearchTeaching.doctoralPoint }}-->
                </text>
              </view>

              <view class="flex-item-25 kyjxTag"
                    v-if="schoolInfo.schoolResearchTeaching && schoolInfo.schoolResearchTeaching.byzg">有保研资格
              </view>
              <view class="flex-item-25 kyjxTag"
                    v-if="schoolInfo.schoolResearchTeaching && schoolInfo.schoolResearchTeaching.yjsy">有研究生院
              </view>
              <view class="flex-item-25 kyjxTag"
                    v-if="schoolInfo.schoolResearchTeaching && schoolInfo.schoolResearchTeaching.zhx">自划线院校
              </view>
            </view>
            <view v-else>
              <text>暂无</text>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
    <view class="m-card padding20 margin20">
      <uni-section title="男女比例" type="line">
        <view class="charts-box padding20">
          <qiun-data-charts type="pie" :opts="opts" :chartData="chartData"/>
        </view>
      </uni-section>
    </view>
    <view class="m-card padding20 margin20">
      <uni-section title="其他信息" type="line">
        <view class="padding20">
          <view class="other-item" v-if="schoolInfo.schoolWebsiteAddress">
            <text class="b">官方网址：</text>
            <uni-link v-if="schoolInfo.schoolWebsiteAddress" :href="schoolInfo.schoolWebsiteAddress"
                      :text="schoolInfo.schoolWebsiteAddress"></uni-link>
          </view>
          <view class="other-item" v-if="schoolInfo.schoolPhone">
            <text class="b">招生电话：</text>
            {{ schoolInfo.schoolPhone }}
          </view>
          <view class="other-item" v-if="schoolInfo.street">
            <text class="b">校区地址：</text>
            {{ schoolInfo.street }}
          </view>

        </view>
      </uni-section>
    </view>
  </view>

  <!--招录信息-->
  <view v-if="tab ==='zlxx'">
    <!--我的成绩-->
    <view class="m-card padding20 margin20">
      <view class="flex padding20">
        <view class="flex-item-5">
          我的成绩：文化分：
          <text class="red">{{ culturalScore || '-' }}</text>
        </view>
        <view class="flex-item-5">
          专业分：
          <text class="orange">{{ professionalScore || '-' }}</text>
        </view>
      </view>
    </view>
    <!--招生章程-->
    <view class="m-card padding20 margin20">
      <uni-section title="招生章程" type="line">
        <view class="messageList" v-for="(item,index) in this.admissionsRegulationsList" :key="index"
              v-if="admissionsRegulationsList">
          <view class="messageItem" @click="JumpTool.goArticleDetail(item)"
                :class="index ===admissionsRegulationsList.length-1?'':'border-bottom'">
            <text class="flexWrap">{{ item.title }}</text>
            <view class="flexWrap margin-top-10">
              <text class="minit margin-right-20" v-if="item.releaseTime">{{ item.releaseTime }}</text>
<!--              <text class="minit">阅读量{{ item.viewCount || '0' }}</text>-->
            </view>
          </view>
        </view>
      </uni-section>
    </view>
    <!--批次线-->
    <view class="m-card padding20 margin20" v-if="false">
      <uni-section title="批次线" type="line">
        <view style="position: relative;bottom: 75rpx;float: right" class="flex-item-6">
          <picker @change="bindPickerPcxChange" :value="professionalCategoryIndex" :range="professionalCategoryList"
                  range-key="value">
            <view class="uni-input font-size-mini" style="float: right">
              {{ professionalCategoryList[professionalCategoryIndex].value }}
              <image :src="ImagesConstant.keyboard.arrowDown2" class="icon50 marginCenter"
                     style="vertical-align: middle"/>
            </view>
          </picker>
        </view>
        <view class="historyScoreLineList slateGray">
          <view class="hsl-item" v-for="(item,index) in historyScoreControlLineList" :key="index">
            <view class="other-item">
              <text>批次：</text>
              <text>{{ item.batch }}</text>
            </view>
            <view class="other-item right-item">
              <text>文化分：</text>
              <text v-if="item.culturalScore">{{ item.culturalScore }}</text>
            </view>

            <view class="other-item">
              <text>{{ item.professionalCategory }}{{ item.year }}年</text>
            </view>
            <view class="other-item right-item">
              <text>专业分：</text>
              <text v-if="item.specialScore">{{ item.specialScore }}</text>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
    <!--录取分数线-->
    <view class="m-card padding20 margin20">
      <uni-section title="录取分数线" type="line">
        <view style="position: relative;bottom: 75rpx;float: right" class="flex-item-6"
              v-if="majorList && majorList.length>0">
          <picker @change="bindPicker_lqMajorChange" :value="fsxIndex" :range="majorList" range-key="majorName">
            <view class="uni-input font-size-mini" style="float: right">{{ majorList[fsxIndex].majorName }}
              <image :src="ImagesConstant.keyboard.arrowDown2" class="icon50 marginCenter"
                     style="vertical-align: middle"/>
            </view>
          </picker>
        </view>
        <view class="historyScoreLineList slateGray" v-if="majorList && majorList.length>0">
          <view class="hsl-item" v-for="(item,index) in majorList[fsxIndex].historyMajorEnrollList" :key="index">
            <!-- <view class="other-item">
              批次：
              <text>{{ item.batch }}</text>
            </view> -->
			<view class="other-item">
			  <text>年份：</text>
			  <text>{{ item.year || '-' }}</text>
			</view>
            <view class="other-item">
              <text>备注：</text>
              <text>{{ item.detail || '-' }}</text>
            </view>
			<!-- <view class="other-item right-item">
			  <text>{{ item.year }}</text>
			</view> -->
            <view class="other-item">
              <text>录取方式：</text>
              <text>{{ item.rulesEnrollProbability || '未公布' }}</text>
            </view>
            <view class="other-item">
              <text>录取公式：</text>
              <text v-if="item.probabilityOperator">{{ item.probabilityOperator }}</text>
              <text v-else-if="item.rulesEnrollProbability && !(item.probabilityOperator)">
                {{
                  item.rulesEnrollProbability === '文过专排' ? '文化分过省控线，专业分排序' : item.rulesEnrollProbability === '专过文排' ? '专业分过省控线，文化分排序' : item.rulesEnrollProbability
                }}
              </text>
              <text v-else>未公布</text>
            </view>
            <view class="other-item">
              <text>录取分数：</text>
              <text class="blue">{{ item.admissionLine || '未公布' }}</text>
            </view>
            <view class="other-item">
              <text>考试类型：</text>
              <text>统考</text>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
  </view>

  <!--开设专业-->
  <view v-if="tab ==='kszy'">
    <!--开设专业-->
    <view class="m-card padding20 margin20">
      <uni-section title="开设专业" type="line">
        <view class="historyScoreLineList slateGray" v-if="majorList && majorList.length>0">
          <view class="hsl-item" :class="index===0?'not-border':''" v-for="(item,index) in majorList" :key="index"
                @click="goto('/pages/zyb/major/detail?majorCode='+item.majorCode)">
            <view class="other-item">
              <text>{{ item.majorName }}</text>
              <text class="xk" v-if="item.kslx && item.kslx==='校考'">校考</text>
            </view>
            <view class="other-item right-item">
              <image :src="ImagesConstant.keyboard.arrowRight" class="icon50"/>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
  </view>
</template>
<style scoped lang="scss">
/*头部部分*/
.head {
  background-color: white;
  min-height: 300rpx;
  border-bottom: 1rpx solid #4975fd;
  border-radius: 0 0 30rpx 30rpx;
}

/*顶部学校名称，图片，地址 信息*/
.schoolHead {
  background-color: white;
  min-height: 200rpx;
  /*院校名称*/
  .schoolName {
    font-size: 30rpx;
  }

  /*办学性质*/
  .schoolNature {
    color: #e2bf44;
    margin-right: 10rpx;
    font-size: 25rpx;
  }

  /*院校类型*/
  .institutionType {
    color: #b4b4b4;
    margin: 0 10rpx;
    font-size: 25rpx;
  }

  /*属性标签*/
  .tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .tags .tag {
    line-height: 30rpx;
    font-size: 25rpx;
    color: #acadba;
    border: 3rpx solid #acadba;
    border-radius: 8rpx;
    padding: 5rpx;
    margin: 0 10rpx 10rpx 0;
  }

  .address {
    font-size: 25rpx;
    color: $uni-bg-color-mask;
  }

  /*收藏按钮*/
  .collectBtn {
    position: relative;
    top: 25rpx;
    font-size: 25rpx !important;
    border: 1rpx solid $uni-bg-color-mask;
    padding: 6rpx 20rpx;
    border-radius: 8rpx;
    transition: 0.3s;
  }

  /*机或者的收藏按钮*/
  .collectBtn-active {
    background-color: #3d76fd;
    border: 1rpx solid #3d76fd;
    color: white;
  }
}

/*其他信息*/
.other-item {
  display: block;
  font-size: 26rpx;
  line-height: 40rpx;

  .b {
    font-weight: 600;
  }
}

.right-item {
  position: relative;
  bottom: 45rpx;
  float: right;
}

/*学校介绍 点击展开更多*/
.content-close {
  max-height: 300rpx;

  text {
    height: 300rpx;
  }
}

/*录取分数线*/
.historyScoreLineList {
  padding: 20rpx;

  .hsl-item {
    padding: 20rpx 0;
    border-top: 4rpx solid #f2f2f2;
  }
}

.uni-input {
  height: 40rpx;
  line-height: 40rpx;
}

/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  padding: 20rpx;
  margin: 0 auto;
  width: 80%;
  height: 200px;
}


/*============================文章列表 start*/
.messageList {
  color: #595757; //文章字体颜色
  .messageItem {
    padding: 30rpx;
  }

  .minit {
    font-size: 25rpx;
    color: #929f9f;
  }
}

/*=============================文章列表 end*/

.content {
  /*font-size: 24rpx;
  text-indent:48rpx;*/
}

.ruanke {
  //background-color: #f4fcf7;
  border-radius: 15rpx;
  color: #6b58fa;
  text-align: center;
}

/*科研教学 start*/
.kyjx {
  text-align: center;

  .kyjxTag {
    background-color: #e7f7ff;
    border: 1rpx solid #99d4fe;
    color: #438dfe;
    font-weight: 600;
    border-radius: 10rpx;
    margin: 5rpx 10rpx;
  }
}

/*科研教学 end*/

.xk{
  color: #f96543 !important;
  position:relative;
  background-color: #fef4f4;
  border-radius: 15rpx;
  padding:0 20rpx;
  left: 10rpx;
}
</style>
