<script>
const app = getApp()
export default {
  name: "home",
  components: {},
  computed: {
  },
  data() {
    return {
      systemName:"",
      playerType:'艺体考生',
      userStatus: false,
      scoreInfo: null,
      zyNum: null,//专业数量
      defaultIcon: app.globalData.ImagesConstant.defaultIcon,//默认图片
      fillVolunteer: {
        all: null,//全部
        kcj: null,//冲刺推荐
        jwt: null,//较稳妥
        kbd: null//可保底
      },
      options: app.globalData.StaticConstant.HomeOptions,
      statusList: [{status: 'noMore'}, {status: 'noMore'},],
      statusTypes: app.globalData.StaticConstant.loadStatusTypes,
      contentText: app.globalData.StaticConstant.loadContentText,

      admissionsRegulationsList: [],//招生章程
      //底部tab切换
      scrollLeft: 0,
      topFlag: false,
      //{id: 1, name: '招生章程', list: [], current: 1, pageSie: 5},
      tabs: [{id: 2, name: '高考动态', current: 1, pageSie: 5, list: []}, {
        id: 3,
        name: '校内资讯', current: 1, pageSie: 5,
        list: []
      }],
      currentTab: 0,
    }
  },
  onLoad(){
    this.systemName = app.globalData.CommonTool.getSystemName()
    if(this.systemName === '体育志愿宝'){
      this.playerType = '体育考生'
      for (let i = 0; i < this.options.length; i++) {
        if(this.options[i].title === '艺考考研'){
          this.options[i].title = '体育计分器'
          this.options[i].url = '/pages/zyb/tiyujisuan/index'
        }
      }
    }
    // 动态设置标题
    uni.setNavigationBarTitle({
      title: this.systemName
    });
    this.getAdmissionsRegulationsList()

	this.getSystemConfig()
  },
  onShow() {
    //进入页面后，判断是否登录了
    let userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
      this.userStatus = true
      //判断缓存中是否有成绩信息
      this.scoreInfo = uni.getStorageSync('scoreInfo')
      //缓存中是否有推荐院校数量
      this.fillVolunteer = uni.getStorageSync('fillVolunteer')
      if (!this.fillVolunteer || this.fillVolunteer === '' || !this.scoreInfo || this.scoreInfo === '') {
        this.getUserScore()
      }
    }
  },
  onReachBottom() {
      this.loadMore()
  },
  onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
    //当距离大于600时显示回到顶部按钮，//当距离小于600时隐藏回到顶部按钮
    this.topFlag = e.scrollTop > 600;
  },
  onShareAppMessage() {
    return {
      title: '测一测你能上的大学', //分享标题
      path: "/pages/zyb/home"
    }
  },
  // 分享到微信朋友圈
  onShareTimeline(res) {
    return {
      title: '测一测你能上的大学', //分享标题
      path: "/pages/zyb/home"
    }
  },
  methods: {
    /*点击 操作菜单*/
    optionItemChange(e) {
      console.log('1111')
      if (this.options && this.options[e.detail.index].url) {
        if (this.options[e.detail.index].title !== '艺考考研' && this.options[e.detail.index].title !== '招生章程') {
          // if (this.checkUserScore()) {
            app.globalData.JumpTool.goto(this.options[e.detail.index].url)
          // }
        } else {
          app.globalData.JumpTool.goto(this.options[e.detail.index].url)
        }
      }
    },
    /*判断用户是否登录*/
    checkUserStatus() {
      if (!this.userStatus) {
        app.globalData.JumpTool.goLogin()
        return false
      }
    },
    /*判断用户的分数信息*/
    checkUserScore() {
      //判断登录状态
      this.checkUserStatus()
      if (!this.scoreInfo) {
        app.globalData.JumpTool.openScoreEdit()
        return false
      } else {
        return true
      }
    },
    onClickEditUserScore() {
      app.globalData.JumpTool.openScoreEdit()
    },
    /*点击AI一键填报*/
    onClickAi() {
      if (this.checkUserScore()) {
        app.globalData.JumpTool.goto('/pages/zyb/fillVolunteer/aiAuto')
      }

    },
    /*点击模拟填报*/
    onClickMn() {
      if (this.checkUserScore()) {
        //app.globalData.JumpTool.goto('/pages/zyb/fillVolunteer/index')
        app.globalData.JumpTool.goto('/pages/zyb/fillVolunteer/mockList')
      }
    },
    /*获取用户的分数信息*/
    getUserScore() {
      app.globalData.Request.get(app.globalData.ApiConstant.Score.getScore, {}).then(res => {
        if (res.success) {
          if (res.result) {
            //接口返回了成绩
            if (res.result.scoreInfo) {
              uni.setStorageSync('scoreInfo', res.result.scoreInfo)
              this.scoreInfo = res.result.scoreInfo
            }
            //从成绩中提取 可报院校专业数量
            if (res.result.fillVolunteer) {
              uni.setStorageSync('fillVolunteer', res.result.fillVolunteer)
              this.fillVolunteer = res.result.fillVolunteer
            }
            if (res.result.volunteer) {
              uni.setStorageSync('volunteer', res.result.volunteer)
              this.volunteer = res.result.volunteer
            }
          }
        } else {
          //有异常
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    /*招生章程*/
    getAdmissionsRegulationsList() {
      this.setStatus('loading')
      let params = {
        type: this.tabs[this.currentTab].id,
        pageNum: this.tabs[this.currentTab].current,
        pageSize: 5
      }
      app.globalData.Request.get(app.globalData.ApiConstant.Article.articlePage, params).then(res => {
        console.log(res)
        if (res.success) {
          this.tabs[this.currentTab].current = res.result.current
          this.tabs[this.currentTab].pages = res.result.pages
          //追加到列表数据中
          this.tabs[this.currentTab].list = [...this.tabs[this.currentTab].list, ...res.result.records]
          if (res.result.current >= res.result.pages) {
            this.setStatus('noMore')
          } else {
            this.setStatus('more')
          }
        } else {
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    setStatus(status) {
      this.statusList[this.currentTab].status = status
    },
    loadMore() {
      if (this.statusList[this.currentTab].status === 'noMore') {
        return;
      }
      console.log('加载中')
      this.tabs[this.currentTab].current++;
      this.getAdmissionsRegulationsList()
    },
    /*回到顶部*/
    clickTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    swichMenu(id) {
      this.currentTab = id

      this.title = ''
      this.tabs[this.currentTab].current = 1
      this.tabs[this.currentTab].list = []
      this.getAdmissionsRegulationsList()

      console.log(id)
      //this.tabCurrent = 'tabNum'+ id
      // 滑动swiper后，每个选项距离其父元素最左侧的距离
      this.scrollLeft = 0;
      for (let i = 0; i < id; i++) {
        this.scrollLeft += 60
        console.log(this.scrollLeft, 60, id)
      }
    },
	  goArticleDetail(e){
      app.globalData.JumpTool.goArticleDetail(e)
    },

    async getSystemConfig(){
      console.log(`wx.getSystemInfoSync()`, wx.getSystemInfoSync())
      
      let miniConfig = await app.globalData.CommonTool.loadStaticConfig('miniConfig')
      app.globalData.StaticConstant.remote = miniConfig
      console.log('app.globalData.StaticConstant.remote ', app.globalData.StaticConstant.remote)
    },
  }
}
</script>

<template>
  <view class="body">
    <!--顶部搜素框-->
    <view class="header">
      <view class="flexWrap systemNameLine">
        <text class="font-size-big font-weight-b margin-left-50">{{ systemName }}</text>
        <text style="position: absolute;left: 350rpx;top:50rpx">河南{{playerType}}专属VIP</text>
      </view>
      <!--      <view class="flexWrap search">
              <view>
                <image src="/static/icons/search.png" class="icon32 margin-right-10"/>
                <text class="bab9c4">找大学</text>
              </view>
            </view>-->
    </view>
    <!--分数面板-->
    <view class="my-score-pane">
      <view class="scoreLine flexWrap">
        <view v-if="!userStatus || !scoreInfo" @click="checkUserScore"
              class="flex-item-10 font-size-mini2 black4 font-weight-500">
          <view class="flexWrap" style="text-align: center">
            <view class="flex-item-10" style="text-align: center">
              <!--              <image src="/static/icons/avatar.png" class="icon50" style="position: relative;right: 10rpx"/>-->
              <text class="margin-right-10">请添加考生信息</text>
            </view>
          </view>
        </view>
        <view v-else class="flex-item-10 font-size-mini2 black4 font-weight-500">
          <view class="flexWrap">
            <view class="flex-item-7">
              <text class="margin-right-10">{{ scoreInfo && scoreInfo.province }}
                <text class="font-weight-none">·</text>
                {{ scoreInfo && scoreInfo.cognitioPolyclinic === '文科' ? '历史组' : '物理组' }}
              </text>
              <text class="margin-right-10">{{ scoreInfo && scoreInfo.professionalCategory }}</text>
            </view>
            <view class="flex-item-3">
              <text class="float-right font-weight-none mediumSlateBlue" @click="onClickEditUserScore">修改成绩</text>
            </view>
          </view>
          <view class="flexWrap">
            <view class="flex-item-10">
              <text class="margin-right-10">文化</text>
              <text class="scoreNum black3 margin-right-10">{{ scoreInfo && scoreInfo.culturalScore }}</text>
              <text class="margin-right-10" v-if="scoreInfo && scoreInfo.professionalCategory!=='表演类'">
                {{ scoreInfo.professionalCategory === '音乐类' ? '主项' : '统考' }}
              </text>
              <text class="scoreNum black3 margin-right-10"
                    v-if="scoreInfo && scoreInfo.professionalCategory!=='表演类'">
                {{ scoreInfo && scoreInfo.professionalScore }}
              </text>
              <br v-if="scoreInfo && scoreInfo.professionalCategory!=='表演类'"/>
              <!--音乐类-->
              <text class="margin-right-10" v-if="scoreInfo && scoreInfo.yybysy">音表声乐</text>
              <text class="scoreNum black3 margin-right-10" v-if="scoreInfo && scoreInfo.yybysy">
                {{ scoreInfo && scoreInfo.yybysy }}
              </text>
              <text class="margin-right-10" v-if="scoreInfo && scoreInfo.yybyqy">音表器乐</text>
              <text class="scoreNum black3 margin-right-10" v-if="scoreInfo && scoreInfo.yybyqy">
                {{ scoreInfo && scoreInfo.yybyqy }}
              </text>
              <text class="margin-right-10" v-if="scoreInfo && scoreInfo.yyjy">音乐教育</text>
              <text class="scoreNum black3 margin-right-10" v-if="scoreInfo && scoreInfo.yyjy">
                {{ scoreInfo && scoreInfo.yyjy }}
              </text>
              <!--表演类-->
              <text class="margin-right-10" v-if="scoreInfo && scoreInfo.fzby">服装表演</text>
              <text class="scoreNum black3 margin-right-10" v-if="scoreInfo && scoreInfo.fzby">
                {{ scoreInfo && scoreInfo.fzby }}
              </text>
              <text class="margin-right-10" v-if="scoreInfo && scoreInfo.xjysdy">影视导演</text>
              <text class="scoreNum black3 margin-right-10" v-if="scoreInfo && scoreInfo.xjysdy">
                {{ scoreInfo && scoreInfo.xjysdy }}
              </text>
              <text class="margin-right-10" v-if="scoreInfo && scoreInfo.xjysby">影视表演</text>
              <text class="scoreNum black3 margin-right-10" v-if="scoreInfo && scoreInfo.xjysby">
                {{ scoreInfo && scoreInfo.xjysby }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!--圆圈-->
      <view class="circle1">
        <view class="circle2">
          <view v-if="!userStatus || !scoreInfo" class="textView" @click="checkUserScore">
            <view class="border-bottom" style="width: 200rpx;margin: 0 auto">
              <text class="d3d3d3 font-weight-550 font-size-big " style="line-height: 70rpx">输入分数</text>
            </view>
            <br/>
            <text class="slateGray font-size-medium">查看可报院校</text>
          </view>
          <view v-else class="textView" @click="onClickMn">
            <view class="" style="width: 250rpx;margin: 0 auto">
              <text class="font-weight-550 font-size-medium2" style="line-height: 70rpx">
                {{ fillVolunteer.allNumber }}
                <text class="font-size-medium">所</text>
              </text>
            </view>
            <br/>
            <text class="slateGray font-size-medium">查看可报院校</text>
          </view>
        </view>
      </view>
      <!--推荐数量-->
      <view class="tuijianshuliang">
        <!--数量行-->
        <view class="numLine black3">
          <!--<text class="font-weight-b redBlack font-size-mini4">·</text><text class="margin-right-10">难录取</text><text class="scoreNum black3 margin-right-10">125</text>-->
          <view class="flexWrap" style="text-align: center" @click="onClickMn">
            <view class="flex-item-33">
              <text class="font-weight-b redOrange font-size-mini4">·</text>
              <text class="margin-right-10">冲刺</text>
              <text class="scoreNum black3 margin-right-10">{{ userStatus && fillVolunteer.kcj || '--' }}</text>
            </view>
            <view class="flex-item-33">
              <text class="font-weight-b royalBlue font-size-mini4">·</text>
              <text class="margin-right-10">稳妥</text>
              <text class="scoreNum black3 margin-right-10">{{ userStatus && fillVolunteer.jwt || '--' }}</text>
            </view>
            <view class="flex-item-33">
              <text class="font-weight-b lightGreen font-size-mini4">·</text>
              <text class="margin-right-10">保底</text>
              <text class="scoreNum black3 margin-right-10">{{ userStatus && fillVolunteer.kbd || '--' }}</text>
            </view>
          </view>
        </view>
      </view>
      <!--登录按钮-->
      <view class="loginBtnView" v-if="!userStatus">
        <view class="loginBtn font-size-mini5 font-weight-b" @click="checkUserStatus">登录/注册</view>
      </view>
      <!--模拟填报按钮-->
      <view class="mnBtnView" v-else>
        <view class="flexWrap" style="-webkit-justify-content: space-between;justify-content: space-between;">
          <view class="flex-item-42 ai radius15" @click="onClickAi">
            <text class="flexWrap font-weight-b font-size-mini4">AI一键填报</text>
            <text class="flexWrap font-weight-b font-size-mini">推荐适合大学</text>
          </view>
          <view class="flex-item-42 mn radius15" @click="onClickMn">
            <text class="flexWrap font-weight-b font-size-mini4">模拟填报</text>
            <text class="flexWrap font-size-mini">找找适合的大学</text>
          </view>
        </view>
      </view>

    </view>
    <!--菜单栏-->
    <view class="optionsView">
      <view class="options">
        <uni-grid style="margin-bottom: 100rpx" :column="4" :highlight="true" :show-border="false"
                  @change="optionItemChange">
          <uni-grid-item v-for="(item, index) in options" :index="index" :key="index">
            <view class="grid-item-box">
              <image :src="item.icon?item.icon:defaultIcon"
                     :style="item.width?'left: 8rpx;top:10rpx;width:'+item.width+';height:'+item.width:'height: 128rpx;width: 128rpx;left: 20rpx;top:20rpx'"/>
              <text class="text">{{ item.title }}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </view>
    <!--文章列表-->
    <view class="top-body">
      <!-- 使用scroll-view实现tabs滑动切换 -->
      <scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
        <view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index"
              @click="swichMenu(index)">
          <view class="" style="transition: 3s all" :class="currentTab===index ? 'menu-topic-act' : 'menu-topic'">
            <text class="menu-topic-text">{{ item.name }}</text>
            <view class="menu-topic-bottom">
              <view class="menu-topic-bottom-color"></view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="messageList" v-for="(item,index) in this.tabs[this.currentTab].list" :key="index"
            v-if="this.tabs[this.currentTab]">
        <view class="messageItem" @click="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>
      <view class="container" @click="loadMore">
        <uni-load-more :status="statusList[currentTab].status" :content-text="contentText"/>
      </view>
    </view>
    <view class="top" :style="{'display':(topFlag===true? 'block':'none')}">
      <uni-icons class="topc" type="arrowthinup" size="40" @click="clickTop"></uni-icons>
    </view>
  </view>
</template>

<style scoped lang="scss">
.body {
  //background-color: #dcdaf7;
  //background-color: white;
  padding: 0 30rpx;
  //background-color: #d1d2d3;
  //background-image: url('/static/home_background.png');
  /*background:         repeating-linear-gradient(#FACA2E,#D56F18);
  background:     -ms-repeating-linear-gradient(#FACA2E,#D56F18);
  background: -webkit-repeating-linear-gradient(#FACA2E,#D56F18);
  background:    -moz-repeating-linear-gradient(#FACA2E,#D56F18);*/

  background: repeating-linear-gradient(#dcdaf7, #f7f7f7, #e6e4e4);
  background: -ms-repeating-linear-gradient(#dcdaf7, #f7f7f7, #e6e4e4);
  background: -webkit-repeating-linear-gradient(#dcdaf7, #f7f7f7, #e6e4e4);
  background: -moz-repeating-linear-gradient(#dcdaf7, #f7f7f7, #e6e4e4);

  overflow: hidden;
  overflow-y: scroll;
  margin-top: 25rpx;
}

.uni-common-mt {
  margin: 0;
}

/*搜素框 start*/
.search {
  margin: 10rpx 0;
  padding: 15rpx 30rpx;
  border: 1rpx solid #666666;
  background-color: white;
  border-radius: 35rpx;
}

/*搜素框 end*/
/*分数信息面板 start*/
.my-score-pane {
  padding: 30rpx 20rpx;
  margin: 20rpx 0;
  background-color: white;
  border-radius: 20rpx;
  //border-radius: 40rpx 0 0 40rpx;
  //background: linear-gradient(to right,#e3e2ff,#fdfdfe);
  min-height: 400rpx;
  //成绩信息行
  .scoreLine {
    margin-bottom: 30rpx;
    //height: 80rpx;
    //padding: 15rpx 30rpx;
    padding: 30rpx 20rpx 30rpx 30rpx;
    border-radius: 20rpx;
    background: linear-gradient(to right, #d6d0fb, #fdfdfe);
  }

  //推荐数量
  .circle1 {
    background-color: #fef1ec;
    height: 500rpx;
    width: 500rpx;
    border-radius: 50%;
    text-align: center;
    //line-height: 300rpx;
    margin: 0 auto;

    .circle2 {
      background-color: white;
      height: 350rpx;
      width: 350rpx;
      border-radius: 50%;
      text-align: center;
      //line-height: 200rpx;
      position: relative;
      left: 80rpx;
      top: 80rpx;
      //top:125rpx;
      //left:125rpx;
      .textView {
        position: relative;
        top: 80rpx;
        line-height: 50rpx;
        //width: 160rpx;
      }
    }
  }

  .tuijianshuliang {
    border: 1rpx solid #e1d2fd;
    padding: 20rpx 10rpx;
    font-size: 25rpx;
    line-height: 30rpx;
    margin: -100rpx 60rpx;
    border-radius: 22rpx;
    position: relative;
    bottom: 100rpx;
    background-color: white;

    .numLine {
      text-align: center;
    }
  }

  //模拟填报块
  .mnBtnView {
    background-color: white;
    position: relative;
    padding: 50rpx 0 10rpx 0;
    color: white;
  }

  .mnBtnView .ai {
    background-color: #f95a3a;
    padding: 20rpx;

  }

  .mnBtnView .mn {
    background-color: #5d5efc;
    padding: 20rpx;
  }

  //登录按钮块
  .loginBtnView {
    background-color: white;
    position: relative;
    padding: 50rpx 150rpx;
    text-align: center;
  }

  .loginBtnView .loginBtn {
    background-color: #f96543;
    color: white;
    line-height: 70rpx;
    border-radius: 25rpx;
  }
}

//分数数字
.scoreNum {
  font-weight: 550;
  font-size: 30rpx;
}

/*分数信息面板 end*/


/*菜单栏 start*/
.optionsView {
  background-color: white;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

/*菜单栏 end*/
/*顶部的推荐院校数量模块*/
.topNumberDiv {
  .tnumber {
    color: white;
    margin: 10px auto;
    width: 30px;
    height: 10px;
    font-weight: 400;
  }

  .ttitle {
    color: #fbd781;
    font-size: 11px;
    font-weight: 500;
  }
}

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

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


.top-body {
  //margin: 30rpx;
  padding: 30rpx;
  background-color: white;
  border-radius: 20rpx 20rpx;
  //position: relative;
  //top: -150rpx;
}

/*tabs 栏*/
.top-menu-view {
  display: flex;
  //position: fixed;
  z-index: 100;
  //top: 84rpx;
  /* #ifdef H5 */
  top: 84rpx;
  /* #endif */
  /* #ifndef H5 */
  top: 0rpx;
  /* #endif */
  left: 0;
  white-space: nowrap;
  width: 100%;
  background-color: white;
  height: 86rpx;
  line-height: 86rpx;
  //border-top: 1rpx solid #d8dbe6;
  border-bottom: 1px solid #f5f5f5;

  .menu-topic-view {
    display: inline-block;
    white-space: nowrap;
    height: 86rpx;
    position: relative;
    width: 50%;
    text-align: center;

    .menu-topic-text {
      font-size: 30rpx;
      color: #303133;
      padding: 10rpx 40rpx;
      font-weight: 500;
    }

    .menu-topic-bottom {
      position: absolute;
      bottom: 0;
      width: 100%;

      .menu-topic-bottom-color {
        width: 40rpx;
        height: 4rpx;
      }
    }

    .menu-topic-act .menu-topic-bottom {
      display: flex;
      justify-content: center;
    }

    .menu-topic-act .menu-topic-text {
      color: #7568e9;
    }


    .menu-topic-act .menu-topic-bottom-color {
      background: #7568e9;
    }
  }
}

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

/*右边距10rpx*/
.marginright10 {
  margin-right: 10rpx;
}

/*字体大小25rpx*/
.fontsize25 {
  font-size: 25rpx;
  color: white;
}


/*宫格 start*/
.image {
  width: 25px;
  height: 25px;
}

.text {
  font-size: 14px;
}

.example-body {
  /* #ifndef APP-NVUE */
  // display: block;
  /* #endif */
}

.grid-dynamic-box {
  margin-bottom: 15px;
}

.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-item-box-row {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-dot {
  position: absolute;
  top: 5px;
  right: 15px;
}

.swiper {
  height: 420px;
}

/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
  .swiper {
    height: 630px;
  }
}

@media screen and (min-width: 1425px) {
  .swiper {
    height: 830px;
  }
}

/* #endif */
/*宫格 end*/


/* 回到顶部 start*/
.top {
  position: relative;
  display: none; /* 先将元素隐藏 */
  transition: 0.5s;
}

.topc {
  position: fixed;
  right: 10rpx;
  //background: #F0F0F0;
  background: #e1e1e1;
  border-radius: 50%;
  top: 80%;
  height: 40px;
  line-height: 40px;
}

/* 回到顶部 end*/
</style>
