迁移党组织

src/apps/party/AppPartyOrganization/AppPartyOrganization.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="detail">
+  <div class="AppPartyOrganization">
     <div class="header"></div>
     <div class="content">
       <div class="party-org">
         <div class="title">所在组织</div>
-        <p class="org-select" @click="selectShow = true">{{detail.name || '请选择'}}<img src="https://cdn.cunwuyun.cn/img/down.svg" /></p>
+        <p class="org-select" @click="selectShow = true">{{ detail.name || '请选择' }}<img
+            src="https://cdn.cunwuyun.cn/img/down.svg"/></p>
       </div>
       <div class="org-info">
         <div class="title">组织信息</div>
@@ -41,7 +42,8 @@
           </div>
           <div class="flexRow">
             <b>当前报到状态：</b>
-            <span :class="userInfo.reportOrgId ? 'status1' : 'status0'">{{userInfo.reportOrgId ? '已报到' : '未报到'}}</span>
+            <span
+                :class="userInfo.reportOrgId ? 'status1' : 'status0'">{{ userInfo.reportOrgId ? '已报到' : '未报到' }}</span>
           </div>
           <div class="flexRow">
             <b>变更党组织：</b>
@@ -63,7 +65,8 @@
 
 <script>
 export default {
-  name: "detail",
+  name: "AppPartyOrganization",
+  appName: "党组织",
   data() {
     return {
       dialog: false,
@@ -145,7 +148,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.detail {
+.AppPartyOrganization {
   height: 100%;
   padding-bottom: 112px;
   box-sizing: border-box;
@@ -161,10 +164,12 @@ export default {
     position: absolute;
     top: 50px;
     left: 32px;
+
     .party-org {
       padding: 32px;
       margin-bottom: 16px;
       background: #FFFFFF;
+
       .title {
         font-size: 34px;
         font-family: PingFangSC-Medium, PingFang SC;
@@ -172,12 +177,14 @@ export default {
         color: #333;
         line-height: 60px;
       }
+
       .org-select {
         font-size: 30px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #666;
         line-height: 42px;
+
         img {
           width: 32px;
           height: 32px;
@@ -186,38 +193,47 @@ export default {
         }
       }
     }
+
     .org-info {
       padding: 0 32px;
       background: #FFFFFF;
       margin-bottom: 16px;
+
       div {
         line-height: 100px;
         font-size: 30px;
         border-bottom: 2px solid #eee;
         box-sizing: content-box;
       }
+
       div:nth-last-of-type(1) {
         border-bottom: 0;
       }
+
       .title {
         font-size: 32px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 700;
         color: #333;
       }
+
       .flex-row {
         display: flex;
         justify-content: space-between;
+
         .color-666 {
           color: #666;
         }
+
         .color-333 {
           color: #333;
         }
       }
+
       .status0 {
         color: #FF8822;
       }
+
       .status1 {
         color: #2EA222;
       }
@@ -226,17 +242,20 @@ export default {
   }
 
 
-  /deep/ .estateNotice {
+  ::v-deep .estateNotice {
     width: 560px;
     background: #FFFFFF;
     padding: 48px;
     box-sizing: border-box;
+
     .status0 {
       color: #FF8822;
     }
+
     .status1 {
       color: #2EA222;
     }
+
     .curEstate {
       color: #666;
       font-size: 28px;

src/apps/party/partyIntegral/listInSort.vue

@@ -1,398 +0,0 @@
-<template>
-  <div>
-    <div class="list-wrap" v-show="!isSearch">
-     <div class="fixed-top" style="background-color:#f3f6f9;">
-        <div class="header box flex-between">
-          <div class="address flex-row">
-            <i class="iconfont">&#xe6a7;</i>
-            <span @click="switchParty">{{user.partyOrgName}}</span>
-            <i class="iconfont">&#xe695;</i>
-          </div>
-          <div class="calendar">
-            <picker class="picker" mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
-              <span>{{date}}</span>
-              <i class="iconfont">&#xe6cf;</i>
-            </picker>
-          </div>
-        </div>
-        <div class="nav-bar box flex-row">
-          <div class="flex-column" data-index="0" @click="tabChange">月度排行
-            <div class="bor-line" :class="navId==0?'active':''"></div>
-          </div>
-          <div class="flex-column" data-index="1" @click="tabChange">累计排行
-            <div class="bor-line" :class="navId==1?'active':''"></div>
-          </div>
-        </div>
-     </div>
-      <div class="score-list">
-        <div class="item line flex-between box" v-for="(item,index) in scoreSortList" :key="index">
-          <div class="left flex-row">
-            <span>{{index + 1}}</span>
-            <img :src="item.avatarUrl?item.avatarUrl:'https://cdn.cunwuyun.cn/profile.png'">
-            <span>{{item.partyName}}</span>
-          </div>
-          <div class="right">{{item.activityIntegral || 0}}分</div>
-        </div>
-        <AiEmpty v-if="scoreSortList.length==0"/>
-      </div>
-    </div>
-    <div class="search-wrap" v-show="isSearch">
-      <div class="header">
-        <div class="flex-row search search-input">
-          <i class="iconfont searIcon">&#xe6d1;</i>
-          <input class="input" type="span" v-model.trim="searchVal" placeholder="请输入党组织" confirm-type="search" @confirm="search">
-        </div>
-      </div>
-      <div class="flex-between history" v-if="searchHis.length && !searchEmpty">
-        <span>历史搜索</span>
-        <div class="cls flex-row" @click="clear">
-          <i class="iconfont clrIcon">&#xe6d2;</i>
-          <span>清空</span>
-        </div>
-      </div>
-      <div class="his-list flex-row" v-if="searchHis.length && !searchEmpty">
-        <div class="his-item" v-for="(item,index) in searchHis" :key="index" @click="searchPartyOrgan(item)">{{item}}</div>
-      </div>
-      <div class="sear-list" v-if="partyOrganList.length">
-        <div class="sear-item flex-align line" v-for="(item,idx) in partyOrganList" :key="idx" @click="selectedPartyOrgan(item)">{{item.name}}</div>
-      </div>
-      <AiEmpty v-if="!partyOrganList.length"/>
-    </div>
-  </div>
-</template>
-
-<script>
-  import {mapState} from "vuex";
-  import moment from "dayjs";
-  export default {
-    name:"listInSort",
-    data(){
-      const currentDate = this.getDate({
-        format: true
-      })
-      return{
-        date:currentDate,
-        navId:0,
-        pageNum: 1,
-        pageSize: 10,
-        pages: 2,
-        searchVal:"",
-        isSearch:false,
-        searchEmpty:false,
-        scoreSortList:[],
-        searchHis:[],
-        partyOrganList:[],
-      }
-    },
-    onLoad(){
-      this.getScoreSort() ;
-      const searchList = uni.getStorageSync("searchHis") || "[]" ;
-      this.searchHis = JSON.parse(searchList) ;
-    },
-    computed:{
-      ...mapState(["user"]),
-      startDate() {
-        return this.getDate('start');
-      },
-      endDate() {
-        return this.getDate('end');
-      },
-      rewriteDate(){
-        return (this.date + "-01 00:00:00");
-      }
-    },
-    methods:{
-      selectedPartyOrgan(item){
-        uni.setNavigationBarTitle({
-            title:"积分排行榜",
-            success:()=>{
-              this.user.partyOrgName = item.name ;
-              this.user.partyOrgId = item.id ;
-              this.searchVal = "" ;
-              this.isSearch = false ;
-              this.searchEmpty = false ;
-              this.pageNum = 1 ;
-              this.pages = 2 ;
-              this.getScoreSort() ;
-            }
-          })
-      },
-      bindDateChange(e) {
-        this.date = e.target.value ;
-        this.$nextTick(()=>{
-          this.pages = 2 ;
-          this.getScoreSort();
-        })
-      },
-      getDate(type) {
-        const date = new Date();
-        let year = date.getFullYear();
-        let month = date.getMonth() + 1;
-
-        if (type === 'start') {
-          year = year - 60;
-        } else if (type === 'end') {
-          year = year + 2;
-        }
-        month = month > 9 ? month : '0' + month;;
-        return `${year}-${month}`;
-      },
-      clear(){
-        if(!this.searchHis.length) return ;
-        uni.showModal({
-          title:"提示",
-          content:"确定要清空历史搜索？",
-          success:(res)=>{
-            if (res.confirm) {
-              uni.setStorageSync("searchHis","") ;
-              this.searchHis = [] ;
-            }
-          }
-        })
-      },
-      search(){
-        let searchHis = uni.getStorageSync("searchHis") || "[]" ;
-        searchHis = JSON.parse(searchHis) ;
-        if(searchHis.indexOf(this.searchVal)==-1 && this.searchVal.trim() !=""){
-          searchHis.unshift(this.searchVal);
-          this.searchHis.unshift(this.searchVal);
-          uni.setStorageSync("searchHis",JSON.stringify(searchHis)) ;
-        }
-        this.searchPartyOrgan(this.searchVal) ;
-      },
-      tabChange(e){
-        this.navId = e.currentTarget.dataset.index ;
-        this.pageNum = 1 ;
-        this.pages = 2 ;
-        this.getScoreSort() ;
-      },
-      switchParty(){
-        uni.setNavigationBarTitle({
-          title:"选择党组织",
-          success:()=>{
-            this.isSearch = true ;
-            this.searchEmpty=false;
-            this.partyOrganList = [] ;
-            const searchList = uni.getStorageSync("searchHis") || "[]" ;
-            this.searchHis = JSON.parse(searchList) ;
-          }
-        })
-      },
-      getScoreSort(){
-        if (this.pageNum > this.pages) return
-        this.$http.post(`/app/apppartyintegralmanage/listInSortForWx?size=${this.pageSize}&current=${this.pageNum}&searchType=${this.navId}&partyOrgId=${this.user.partyOrgId}&searchTime=${this.rewriteDate}`).then(res => {
-          this.scoreSortList = this.pageNum > 1 ? [...this.scoreSortList, ...res.data.records] : res.data.records
-          this.pages = Math.ceil(res.data.total / 10);
-        })
-      },
-
-      searchPartyOrgan(searchVal){
-        this.searchEmpty = true
-        this.$http.post(`/admin/partyOrganization/queryPartyOrganizationListByName?name=${searchVal}`).then((res)=>{
-          if(res && res.data){
-            this.partyOrganList = res.data ;
-          }
-        })
-      },
-    },
-
-    onReachBottom() {
-      console.log(123)
-      this.pageNum = this.pageNum + 1;
-      this.getScoreSort() ;
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "../../../common/common.css";
-  @import "../../../common/style";
-
-
-    .line{
-      border-bottom: 2px solid #EEEEEE;
-    }
-    .list-wrap{
-      .header{
-        width: 100%;
-        height:104px;
-        background: #FFFFFF;
-        .address{
-          width: 80%;
-          overflow:hidden;
-          span-overflow:ellipsis;
-          display:-webkit-box;
-          -webkit-line-clamp:1;
-          -webkit-box-orient:vertical;
-          span{
-            font-size: 32px;
-            font-weight: 400;
-            color: #E6736E;
-            margin: 0 10px;
-          }
-          .iconfont{
-            display: inline-block;
-            vertical-align: middle;
-            color: #E6736E;
-            &:nth-child(1){
-              font-size: 42px;
-            }
-          }
-        }
-        .calendar{
-          width: 256px;
-          height: 56px;
-          background: #F5DFDF;
-          border-radius: 28px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          .picker{
-            display: flex;
-            align-items: center;
-          }
-          span{
-            display: inline-block;
-            padding-right: 10px;
-            border-right: 4px solid #E6736E;
-            line-height: 26px;
-            font-size: 28px;
-            font-weight: 800;
-            color: #E6736E;
-            box-sizing: border-box;
-          }
-          .iconfont{
-            display: inline-block;
-            font-size: 36px;
-            color: #E6736E;
-            padding-left: 10px;
-          }
-        }
-      }
-      .nav-bar{
-        width: 100%;
-        height:104px;
-        margin-top: 8px;
-        align-items: center;
-        justify-content: center;
-        background: #FFFFFF;
-        > div{
-          width: 50%;
-          align-items: center;
-        }
-        .bor-line{
-          width: 52px;
-          height: 11px;
-          background: transparent;
-          border-radius: 4px;
-          margin-top: 24px;
-        }
-        .active{
-          background: #E05953;
-        }
-      }
-      .score-list{
-        width: 100%;
-        padding-top: 224px;
-        .item{
-          align-items: center;
-          height: 148px;
-          background: #FFFFFF;
-          .left{
-            align-items: center;
-            span{
-              font-size: 40px;
-              font-weight: 500;
-              color: #666666;
-            }
-            img{
-              width: 80px;
-              height: 80px;
-              margin: 0 16px;
-              border-radius: 50%;
-            }
-          }
-          .right{
-            font-size: 36px;
-            font-weight: 500;
-            color: #E6736E;
-          }
-        }
-      }
-      .box{
-        box-sizing: border-box;
-        padding: 0 32px;
-      }
-    }
-    .search-wrap{
-      background: #F5F5F5;
-      .header{
-        width: 100%;
-        height: 95px;
-        background: #FFFFFF;
-        box-sizing: border-box;
-        padding: 0 32px;
-        .search{
-          width: 100%;
-          height: 64px;
-          border-radius: 32px;
-          align-items: center;
-          background: #F5F5F5;
-          box-sizing: border-box;
-          padding: 0 32px;
-          .searIcon{
-            color: #CCCCCC;
-            font-size: 38px;
-          }
-          input{
-            width: 100%;
-          }
-          .input{
-            font-size: 26px;
-            font-weight: 400;
-            color: #999999;
-          }
-        }
-      }
-      .history{
-        align-items: center;
-        box-sizing: border-box;
-        padding: 26px 32px 47px 32px;
-        span{
-          font-size: 30px;
-          font-weight: bold;
-          color: #333333;
-        }
-        .cls{
-          align-items: center;
-          .clrIcon{
-            color: #999999;
-            font-size: 44px;
-          }
-        }
-      }
-      .his-list{
-        width: 100%;
-        flex-wrap: wrap;
-        box-sizing: border-box;
-        padding: 0 32px;
-        .his-item{
-          box-sizing: border-box;
-          padding: 20px 24px;
-          background: #FFFFFF;
-          margin: 0 16px 16px 0;
-        }
-      }
-      .sear-list{
-        width: 100%;
-        .sear-item{
-          width: 100%;
-          height: 104px;
-          box-sizing: border-box;
-          padding: 0 32px;
-          background: #FFFFFF;
-          align-items: center;
-        }
-      }
-    }
-</style>

src/apps/party/partyIntegral/partyIntegral.vue

@@ -1,184 +0,0 @@
-<template>
-  <div class="page">
-    <img class="header-avatar" :src="user.avatarUrl" />
-    <div class="header">
-      <div class="score">{{ integralInfo.totalIntegral || 0 }}</div>
-      <div class="header-tip">累计获得积分</div>
-      <div class="detail-btn" @click="toDetail">查看明细</div>
-    </div>
-    <div class="link-list">
-      <div class="link-item baoder-r-t border-b">
-        <div class="label">本月获得积分</div>
-        <div class="value">{{ integralInfo.monthIntegral || 0 }}</div>
-      </div>
-      <div class="link-item baoder-r-t border-b">
-        <div class="label">本月组织内排名({{ user.partyOrgName }}）</div>
-        <div>第{{ integralInfo.rankNum || 0 }}名</div>
-      </div>
-    </div>
-    <div class="check-btn" @click="checkRank">查看排行榜</div>
-  </div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-export default {
-  name: "partyIntegral",
-  data() {
-    return {
-      userInfo: {},
-      integralInfo: {},
-    };
-  },
-  computed: {
-    ...mapState(["user"]),
-  },
-  onLoad() {
-    this.getInfo();
-  },
-  methods: {
-    getInfo() {
-      this.$http.post(`/app/apppartyintegralmanage/queryDetailByOpenIdForWx`).then((res) => {
-        if (res && res.data) this.integralInfo = res.data;
-      });
-    },
-    toDetail() {
-      uni.navigateTo({
-        url: "./partyIntegralDetail",
-      });
-    },
-    checkRank() {
-      uni.navigateTo({
-        url: "./listInSort",
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scope>
-@import "../../../common/common.css";
-
-.page {
-  width: 100%;
-  background: #ffffff;
-  padding-top: 100px;
-  position: relative;
-
-  .header-avatar {
-    position: absolute;
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    top: 50px;
-    left: 316px;
-    z-index: 99;
-  }
-
-  .header {
-    padding-top: 100px;
-    width: 686px;
-    background: url("https://cdn.cunwuyun.cn/guangdong/h5/partyLogo01.png") no-repeat
-      no-repeat;
-    background-size: 100% 100%;
-    border-radius: 4px;
-    margin: 0 0 32px 32px;
-    position: relative;
-    box-sizing: border-box;
-    overflow: hidden;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .score {
-      font-size: 72px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 84px;
-      margin-bottom: 8px;
-      text-align: center;
-    }
-
-    .header-tip {
-      font-size: 26px;
-      font-weight: 500;
-      color: #ffffff;
-      line-height: 36px;
-      text-align: center;
-    }
-
-    .detail-btn {
-      width: 240px;
-      height: 56px;
-      border-radius: 28px;
-      border: 2px solid #ffffff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 28px;
-      font-weight: 500;
-      color: #ffffff;
-      margin: 34px 0;
-    }
-  }
-
-  .link-list {
-    width: 686px;
-    margin: 0 auto;
-
-    .link-item {
-      width: 100%;
-      height: 128px;
-      padding-right: 32px;
-      box-sizing: border-box;
-      line-height: 128px;
-      background-color: #fff;
-      display: flex;
-      justify-content: space-between;
-
-      .label {
-        width: 450px;
-        display: flex;
-        padding-left: 34px;
-        color: #292d33;
-        font-size: 30px;
-        justify-content: center;
-        overflow: hidden;
-        span-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        word-break: break-all;
-      }
-      .value {
-        font-size: 30px;
-        font-weight: 400;
-        color: #333333;
-      }
-    }
-
-    .baoder-r-t {
-      border-radius: 20px 20px 0 0;
-    }
-
-    .border-b {
-      border-bottom: 2px solid #ddd;
-    }
-  }
-  .check-btn {
-    width: 686px;
-    height: 95px;
-    margin: 0 auto;
-    background: #e76056;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 42px;
-    font-size: 32px;
-    font-weight: 500;
-    color: #ffffff;
-  }
-}
-</style>

src/apps/party/partyIntegral/partyIntegralDetail.vue

@@ -1,246 +0,0 @@
-<template>
-  <div class="page">
-    <div class="header box flex-align">
-      <div class="date flex-between">
-        <div class="calendar">
-          <picker class="picker" mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
-            <span>{{date}}</span>
-            <i class="iconfont">&#xe6cf;</i>
-          </picker>
-        </div>
-        <span class="score-tip">获得积分 {{integral}}</span>
-      </div>
-    </div>
-    <div class="score-list">
-      <div class="item line flex-row box" v-for="item of scoreList" :key="item">
-        <div class="left">
-          <div>{{item.doTime && item.doTime.split(" ")[0]}}</div>
-          <div>{{item.doTime && item.doTime.split(" ")[1]}}</div>
-        </div>
-        <div class="right">
-          <div class="rig-cir">
-            <span></span>
-            <span></span>
-          </div>
-          <div class="rig-conn">
-            <div :style="{color:color[item.integralType]}">
-              <span v-if="item.integralType==1">＋</span>
-              {{item.activityIntegral || 0}}
-            </div>
-            <div>{{item.ruleName || "-"}}</div>
-          </div>
-        </div>
-      </div>
-      <AiEmpty v-if="!scoreList.length"/>
-    </div>
-  </div>
-</template>
-
-<script>
-  import {mapState} from "vuex";
-  import axios from "axios" ;
-  export default {
-    name:"partyIntegralDetail",
-    data(){
-      const currentDate = this.getDate({
-        format: true
-      })
-      return{
-        date:currentDate,
-        pageNum: 1,
-        pageSize: 10,
-        pages: 2,
-        integral:0,
-        scoreList:[],
-      }
-    },
-    computed: {
-      ...mapState(["user"]),
-      startDate() {
-        return this.getDate('start');
-      },
-      endDate() {
-        return this.getDate('end');
-      },
-      color(){
-        return ["#FF9B2B","#E6736E"]
-      },
-      rewriteDate(){
-        return (this.date + "-01 00:00:00") ;
-      }
-    },
-    onLoad(){
-      axios.all([this.getScoreList(),this.totalIntegral()])
-    },
-    methods:{
-      bindDateChange(e) {
-        this.date = e.target.value ;
-        this.$nextTick(()=>{
-          this.pages = 2 ;
-          axios.all([this.getScoreList(),this.totalIntegral()])
-        })
-      },
-      getDate(type) {
-        const date = new Date();
-        let year = date.getFullYear();
-        let month = date.getMonth() + 1;
-
-        if (type === 'start') {
-          year = year - 60;
-        } else if (type === 'end') {
-          year = year + 2;
-        }
-        month = month > 9 ? month : '0' + month;;
-        return `${year}-${month}`;
-      },
-
-      getScoreList(){
-        if (this.pageNum > this.pages) return
-        this.$http.post(`/app/apppartyintegralmanage/listForWx?size=${this.pageSize}&current=${this.pageNum}&partyId=${this.user.id}&doTime=${this.rewriteDate}`).then(res => {
-          this.scoreList = this.pageNum > 1 ? [...this.scoreList, ...res.data.records] : res.data.records
-          this.pages = Math.ceil(res.data.total / 10);
-        })
-      },
-      totalIntegral(){
-        this.$http.post(`/app/apppartyintegralmanage/totalIntegralForWx`,{
-          partyId:this.user.id,
-          doTime:this.rewriteDate
-        }).then((res)=>{
-          res.data && (this.integral = res.data)
-        })
-      }
-    },
-
-    onReachBottom() {
-      this.pageNum = this.pageNum + 1;
-      this.getScoreList()
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "../../../common/common.css";
-  .page {
-    width: 100%;
-    background: #F4F5F6;
-    .header{
-      width: 100%;
-      height:104px;
-      background: #FFFFFF;
-      .date{
-        width: 100%;
-        .calendar{
-          width: 224px;
-          height: 56px;
-          background: #F5DFDF;
-          border-radius: 28px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          .picker{
-            display: flex;
-            align-items: center;
-          }
-          span{
-            display: inline-block;
-            padding-right: 10px;
-            border-right: 4px solid #E6736E;
-            line-height: 26px;
-            font-size: 28px;
-            font-weight: 800;
-            color: #E6736E;
-            box-sizing: border-box;
-          }
-          .iconfont{
-            display: inline-block;
-            font-size: 36px;
-            color: #E6736E;
-            padding-left: 10px;
-          }
-        }
-        .score-tip{
-          font-size: 32px;
-          font-weight: 500;
-          color: #333333;
-        }
-      }
-    }
-    .score-list{
-      width: 100%;
-      height: 100%;
-      margin-top: 8px;
-      background: #FFFFFF;
-      .item{
-        align-items: center;
-        height: 184px;
-        background: #ffffff;
-        .left{
-          width: 250px;
-          text-align: center;
-          div:nth-child(1){
-            font-size: 30px;
-            font-weight: 500;
-            color: #333333;
-          }
-          div:nth-child(2){
-            font-size: 28px;
-            font-weight: 500;
-            color: #999999;
-          }
-        }
-        .right{
-          display: flex;
-          .rig-cir{
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            padding: 10px 10px 10px 0;
-            span{
-              display: inline-block;
-              width: 18px;
-              height: 18px;
-              border-radius: 50%;
-              border: 4px solid #EAEBEB;
-              &:after{
-                content: " ";
-                position: absolute;
-                left: 11px;
-                top: 30px;
-                width: 4px;
-                height: calc(100% - 58px);
-                background: #EAEBEB;
-              }
-            }
-          }
-          .rig-conn:nth-child(1){
-            font-size: 34px;
-            font-weight: 600;
-            color: #E6736E;
-            line-height: 64px;
-          }
-          .rig-conn:nth-child(2){
-            width: 452px;
-            word-break: break-all;
-            overflow: hidden;
-            span-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            font-size: 30px;
-            font-weight: 400;
-            color: #333333;
-            line-height: 42px;
-          }
-        }
-      }
-    }
-    .box{
-      box-sizing: border-box;
-      padding: 0 32px;
-    }
-    .line{
-      border-bottom: 2px solid #EEEEEE;
-    }
-  }
-</style>