<template>
  <view>
    <u-navbar back-text="" title="个人主页"></u-navbar>
    <view class="flex-col section_2">
      <view class="justify-between section_3">
        <view class="flex-col text-wrapper_3">
          <!-- <text class="text_1">{{userInfo.baseData.name || userInfo.baseData.userName }} -->
          <!-- </text> -->
          <text class="text_1">{{ attestation.name || "-" }} </text>
          <view class="role-box">
            <view
              @click="baseShow = true"
              v-if="otherUserType === 1"
              class="role-item"
              :class="baseShow ? 'active' : ''"
            >
              <image
                src="/static/common/img/role2.png"
                style="
                  width: 30rpx;
                  height: 30rpx;
                  transform: translateY(5rpx) scale(1.4);
                  margin-right: 15rpx;
                "
              />
              <text>教师</text>
            </view>
            <view
              @click="baseShow = true"
              v-if="otherUserType === 0"
              class="role-item"
              :class="baseShow ? 'active' : ''"
            >
              <image
                src="/static/common/img/role3.png"
                style="
                  width: 30rpx;
                  height: 30rpx;
                  transform: translateY(5rpx) scale(1.4);
                  margin-right: 15rpx;
                "
              />
              <text>学生</text>
            </view>
            <view
              @click="baseShow = false"
              v-if="qyShow"
              class="role-item"
              :class="!baseShow ? 'active' : ''"
              style="margin-left: 20rpx"
            >
              <image
                src="/static/common/img/role1.png"
                style="
                  width: 30rpx;
                  height: 30rpx;
                  transform: translateY(5rpx) scale(1.4);
                  margin-right: 15rpx;
                "
              />
              <text>企业</text>
            </view>
          </view>
          <!-- 学校信息 -->
          <template v-if="baseShow === true">
            <!-- 学生显示 -->
            <template v-if="otherUserType === 0">
              <!-- 学校名称 -->
              <text class="text_2">{{ findRow.schoolName || "-" }}</text>
              <!-- 年级 -->
              <text class="text_2" v-if="findRow.startYear">{{
                findRow.startYear + "级"
              }}</text>
              <!-- 学院 -->
              <text class="text_2" v-if="findRow.college">{{
                findRow.college
              }}</text>
              <!-- 专业 -->
              <view class="flex-row">
                <text
                  class="text_2"
                  style="margin-right: 0.05rem"
                  v-if="findRow.major"
                  >{{ findRow.major }}</text
                >
              </view>
            </template>
            <!-- 教师显示 -->
            <template v-if="otherUserType === 1">
              <!-- 学校名称 -->
              <text class="text_2">{{ findRow.school || "-" }}</text>
              <!-- 年级 -->
              <text class="text_2">{{ findRow.schoolJob }}</text>
            </template>
          </template>
          <!-- 企业信息 -->
          <template v-if="baseShow === false && qyRow">
            <text class="text_2">{{ qyRow.businessName || "-" }}</text>
            <text class="text_2">{{ qyRow.businessAddress || "-" }}</text>
            <text class="text_2">{{ qyRow.job || "-" }}</text>
          </template>
        </view>
        <view class="flex-col img-box">
          <u-avatar
            class="image_2"
            size="144"
            :src="$u.http.config.imgUrl + userInfo.baseData.head"
          >
          </u-avatar>
          <view class="flex-row group_3" v-if="vuex_user.id != userId">
            <view class="flex-col items-center text-wrapper"
              ><text class="text_2" @click="GoChat">私信</text>
            </view>
            <view
              class="flex-col items-center text-wrapper_1"
              @click="onFollow"
            >
              <text class="text_3">{{ userInfo.carewState }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-if="!userInfo.isCertifyStatus" class="flex-row group_4">
        <image
          src="/static/common/img/16535374500735010318.png"
          class="image_3"
        />
        <text class="text_4">该用户尚未进行认证，请注意信息的甄别</text>
      </view>
    </view>
    <!-- 无数据 -->
    <view class="flex-col items-center group_5" v-if="false">
      <image
        src="/static/common/img/16535374500948048054.png"
        class="image_4"
      />
      <text class="text_5">暂无数据，请尽快认证补充资料~</text>
    </view>
    <!--有数据  -->
    <div class="detil">
      <view class="slot-wrap">
        <u-tabs-swiper
          ref="uTabs"
          :list="navList"
          :current="current"
          :is-scroll="true"
          gutter="60"
          :active-item-style="{ color: '#3CB5FB', transition: 'all 0.5s' }"
          :bar-style="{ background: '#3CB5FB' }"
          @change="tabsChange"
        ></u-tabs-swiper>
      </view>
      <swiper
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
        style="height: calc(100vh - 2.8rem); width: 100%"
      >
        <swiper-item
          class="swiper-item"
          v-for="(item, index) in navList"
          :key="index"
          style="height: calc(100vh - 2.8rem); width: 100%"
        >
          <!-- 个人信息 -->
          <template v-if="index === 0">
            <scroll-view
              scroll-y="true"
              style="height: calc(100vh - 2.8rem); width: 100%"
              @scrolltolower="onreachBottom"
              :data-index="index"
            >
              <view class="flex-col section_7" v-if="userInfo">
                <view class="flex-col items-start text-wrapper_2">
                  <text class="text_10">基本信息</text>
                </view>
                <view class="justify-between group_7">
                  <text class="text_11">手机号码</text>
                  <text class="text_12">{{ userInfo.baseData.phone }}</text>
                </view>
                <view class="group_8 justify-between view">
                  <text class="text_13 text_14">年龄</text>
                  <text class="text_15 text_16">{{
                    userInfo.baseData.age
                  }}</text>
                </view>
                <view class="group_8 justify-between">
                  <text class="text_13">现居地（区）</text>
                  <text class="text_15 text_18">{{
                    userInfo.baseData.address
                  }}</text>
                </view>
                <view class="group_8 justify-between">
                  <text class="text_13 text_19">工作领域</text>
                  <text class="text_15 text_20">{{
                    userInfo.baseData.workField
                  }}</text>
                </view>
              </view>
              <!-- 教育经历 -->
              <view
                class="flex-col section_8"
                v-if="userInfo && otherUserType === 0"
              >
                <view class="flex-col items-start text-wrapper_3"
                  ><text class="text_21">教育经历</text>
                </view>
                <!-- <view class="flex-row group_9" v-for="(item, index) in userInfo.edcationList" v-if='item.certifyStatus==1' :key="index">
                  <text class="text_22">{{item.schoolName}}</text>
                  <text class="text_23" :class="item.certifyStatus==0?'color2':item.certifyStatus==1?'color1':'color3'">{{certifyArr[item.certifyStatus]}}</text>
                  <view class="flex-col group_10">
                    <view class="flex-row section_9">
                      <text class="text_24">{{item.startYear}}年入学</text>
                      <text class="text_25">{{item.major}}</text>
                      <text class="text_26">{{item.educationStr}}</text>
                    </view>
                    <image
                      :src="$u.http.config.imgUrl+item.schoolLogo"
                      class="image_4"
                    />
                  </view>
                </view> -->
                <view
                  class="flex-col group_16"
                  v-for="(item, index) in userInfo.edcationList"
                  v-if="item.certifyStatus == 1 || true"
                  :key="index"
                >
                  <view class="flex-row group_17">
                    <view class="flex-row">
                      <image
                        :src="$u.http.config.imgUrl + item.schoolLogo.slice(1)"
                        class="image_17"
                      />
                      <view class="flex-col group_18">
                        <view class="flex-row">
                          <text class="text_24">{{ item.schoolName }}</text>
                          <text
                            class="text_25"
                            :class="
                              item.certifyStatus == 0
                                ? 'color2'
                                : item.certifyStatus == 1
                                ? 'color1'
                                : 'color3'
                            "
                            >{{ certifyArr[item.certifyStatus] }}</text
                          >
                        </view>
                        <view class="flex-row group_20">
                          <text>{{ item.startYear }}年入学</text>
                          <text class="text_27">{{ item.major }}</text>
                          <text class="text_28">{{ item.educationStr }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="section_6" style="padding: 0"> </view>
                </view>
              </view>
              <!-- 任职院校 -->
              <view
                class="flex-col section_8"
                v-if="userInfo && otherUserType === 1"
              >
                <view class="flex-col items-start text-wrapper_3"
                  ><text class="text_21">任职院校</text>
                </view>
                <view
                  class="flex-col group_16"
                  v-for="(item, index) in userInfo.edcationList"
                  v-if="item.certifyStatus == 1 || true"
                  :key="index"
                >
                  <view class="flex-row group_17">
                    <view class="flex-row">
                      <image
                        :src="$u.http.config.imgUrl + item.logo.slice(1)"
                        class="image_17"
                      />
                      <view class="flex-col group_18">
                        <view class="flex-row">
                          <text class="text_24">{{ item.school }}</text>
                          <text
                            class="text_25"
                            :class="
                              item.certifyStatus == 0
                                ? 'color2'
                                : item.certifyStatus == 1
                                ? 'color1'
                                : 'color3'
                            "
                            >{{ certifyArr[item.certifyStatus] }}</text
                          >
                        </view>
                        <view class="flex-row group_20">
                          <text>{{ item.schoolJob }}</text>
                          <!-- <text>{{item.startYear}}年入学</text> -->
                          <!-- <text class="text_27">{{item.major}}</text> -->
                          <!-- <text class="text_28">{{item.educationStr}}</text> -->
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="section_6" style="padding: 0"> </view>
                </view>
              </view>
              <view style="height: 100rpx"></view>
            </scroll-view>
          </template>
          <!-- 发布 -->
          <template v-else>
            <scroll-view
              scroll-y="true"
              style="height: calc(100vh - 2.8rem); width: 100%"
              @scrolltolower="onreachBottom"
              :data-index="index"
            >
              <information
                :list="userList"
                @onStar="onStar"
                type="1"
                :schoolId="schoolId"
                route="2"
                :flag="type"
              ></information>
              <!--    <view class="flex-col section_6">
                <view class="justify-between">
                  <view class="flex-row">
                    <image
                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6216dee45a7e3f031061d0f1/624409975b22cf00110eafb0/16535374496764278404.png"
                      class="image_4 image_5"
                    />
                    <view class="flex-col items-start group_8">
                      <text class="text_9">l李晓</text>
                      <text class="text_10">浙江大学</text>
                    </view>
                  </view>
                  <text class="text_11">8小时前</text>
                </view>
                <view class="flex-col group_9">
                  <view class="flex-col group_10">
                    <text class="text_12">求合租，地点浙江大学附近</text>
                    <text class="text_13"
                      >合租需求单身女性，爱护环境干净整洁优先，有爱心喜欢小动物优先....</text
                    >
                  </view>
                  <text class="text_14"># 租房</text>
                  <view class="flex-row equal-division">
                    <view class="flex-row">
                      <image
                        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6216dee45a7e3f031061d0f1/624409975b22cf00110eafb0/16535374496943753946.png"
                        class="image_6"
                      />
                      <text class="text_15">686</text>
                    </view>
                    <view class="flex-row equal-division-item_1">
                      <image
                        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6216dee45a7e3f031061d0f1/624409975b22cf00110eafb0/16535374494367430312.png"
                        class="image_6"
                      />
                      <text class="text_16">996</text>
                    </view>
                    <view class="flex-row equal-division-item_2">
                      <image
                        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6216dee45a7e3f031061d0f1/624409975b22cf00110eafb0/16535374491819437386.png"
                        class="image_6"
                      />
                      <text class="text_17">100</text>
                    </view>
                  </view>
                </view>
              </view> -->
            </scroll-view>
          </template>
        </swiper-item>
      </swiper>
    </div>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import information from "../../../components/Information.vue";
export default {
  components: {
    information: information,
  },
  data() {
    return {
      userId: "",
      swiperCurrent: 0,
      current: 0,
      schoolId: "",
      type: "",
      userList: [],
      navList: [
        {
          name: "个人信息",
        },
        {
          name: "Ta的发布",
        },
      ],
      certifyArr: {
        0: "未认证",
        1: "已认证",
        2: "审核中",
      },
      userInfo: {},
      word: "",
      otherUserType: true,
      attestation: {},
      // 基础信息
      findRow: {},
      // 企业信息
      qyRow: {},
      // 企业与基础信息切换
      baseShow: true,
      // 企业按钮是否存在
      qyShow: false,
    };
  },
  onLoad(e) {
    if (!e.id) {
      uni.switchTab({
        url: "../../main/index/index",
      });
      return;
    }
    this.type = e.type;
    this.userId = e.id;
    this.word = e.word;
    this.getDetail();
    this.getUserSchool();
  },
  onShow() {
    if (this.current == 1) {
      this.getUserHelp();
    }
  },
  methods: {
    lookQY() {
      console.log(7777777);
    },
    getUserHelp() {
      const data = {
        userId: this.userId,
        pageIndex: 1,
        pageSize: 10,
      };
      this.$u.apiList.UserHelp(data).then((res) => {
        this.userList = res.items;
      });
    },
    getDetail() {
      this.$u.api
        .getUserInfo({
          userId: this.userId,
        })
        .then((res) => {
          this.userInfo = res;
          this.attestation = Object.assign(this.attestation, res.attestation);
          this.otherUserType = res.userType;
          // console.log(this.userInfo, 1)
          this.findRow = res.edcationList[0];
          if (res.qyAttestation) {
            this.qyShow = true;
            this.qyRow = res.qyAttestation;
          }
        });
    },
    //   去聊天
    GoChat() {
      uni.navigateTo({
        url:
          "../../message/dialogBox/dialogBox?id=" + this.userId + "&chatType=0",
      });
    },
    // tabs通知swiper切换
    tabsChange(index) {
      if (index == 1) {
        this.getUserHelp();
      }
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问速切题，快换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    onFollow() {
      const data = {
        userId: this.vuex_user.id,
        carewId: this.userId,
      };
      this.$u.apiList.InsertOrDelFollow(data).then((res) => {
        this.getDetail();
      });
    },
    getUserSchool() {
      this.$u.apiList.GetUserSchool().then((res) => {
        // 学生时
        if ([0,2].includes(this.vuex_user.userType)) {
          this.schoolId = res.items.schoolId;
        }
        // 教师时
        if (this.vuex_user.userType === 1) {
          this.schoolId = res.jzgItems.schoolId;
        }
      });
    },
    async onStar(val) {
      console.log("收藏--");
      // 判断当前学校是否认证，未认证不可收藏
      const req = {
        userId: this.vuex_user.id,
      };
      const result = await this.$u.apiList.MyPage(req);
      console.log(JSON.parse(JSON.stringify(result)), "result");
      const edcationList = result.edcationList;
      if (!edcationList.length) {
        return this.$refs.uToast.show({
          title: "认证后可进行收藏操作",
          type: "none",
        });
      }
      const findRow = edcationList.find((x) => x.isSelected === true);
      if ([0, 2].includes(findRow.certifyStatus)) {
        return this.$refs.uToast.show({
          title: "认证后可进行收藏操作",
          type: "none",
        });
      }
      // return
      const data = {
        id: val.id,
        type: val.type,
      };
      this.$u.apiList
        .LikeCollect(data)
        .then((res) => {
          if (val.type == 0) {
            if (val.isCllect) {
              val.isCllect = false;
              val.collectCount -= 1;
              this.$refs.uToast.show({
                title: "取消收藏成功",
                type: "success",
              });
            } else {
              val.isCllect = true;
              val.collectCount += 1;
              this.$refs.uToast.show({
                title: "收藏成功",
                type: "success",
              });
            }
          } else if (val.type == 1) {
            if (val.isCllect) {
              val.isCllect = false;
              val.collectCount -= 1;
              this.$refs.uToast.show({
                title: "取消收藏成功",
                type: "success",
              });
            } else {
              val.isCllect = true;
              val.collectCount += 1;
              this.$refs.uToast.show({
                title: "收藏成功",
                type: "success",
              });
            }
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: "收藏失败",
            type: "error",
          });
        });
    },
    //返回上一级
    router() {
      if (this.type == 0) {
        uni.switchTab({
          url: "../../message/msgList/msgList",
        });
      } else if (this.type == 1) {
        uni.navigateTo({
          url:
            "../../message/dialogBox/dialogBox?id=" +
            this.userId +
            "&chatType=0&type=0",
        });
      } else if (this.type == 2) {
        this.$u.route({
          url: "pages/AlumniCircle/Alumni/Alumni",
        });
      } else if (this.type == 3) {
        let url = "pages/main/search/search";
        if (this.word) {
          url = "pages/main/search/search?word=" + this.word;
        }
        this.$u.route({
          url: url,
        });
      } else if (this.type == 4) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.switchTab({
          url: "pages/main/index/index",
        });
      }
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
  },
};
</script>

<style lang="scss" scoped>
.group_5 {
  margin-top: 0.63rem;

  .image_4 {
    width: 1.95rem;
    height: 1.73rem;
  }

  .text_5 {
    margin-top: 0.18rem;
    color: #a3b6ca;
    font-size: 0.15rem;
    font-family: PingFang;
    line-height: 0.15rem;
  }
}

.section_2 {
  padding: 0.075rem 0.14rem 0 0.15rem;
  background-color: #ffffff;

  .section_3 {
    // border:1px solid red;
    min-height: 500rpx;
    padding: 0.39rem 0.13rem 0.46rem 0.23rem;
    background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6216dee45a7e3f031061d0f1/624409975b22cf00110eafb0/16535374499958928799.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    .img-box {
      position: absolute;
      right: 30rpx;
    }

    .text-wrapper_3 {
      position: absolute;
      // min-height: 200rpx;
      margin-top: 0.07rem;

      .role-box {
        display: flex;
        margin-top: 20rpx;
        .role-item {
          font-size: 25rpx;
          color: #ffffff;
          padding-left: 5rpx;
          padding-right: 10rpx;
          border-radius: 10rpx;
        }
        .active {
          color: aqua;
          border: 1px solid #00a8ea;
          background-color: #00a8ea;
        }
      }
      .text_1 {
        color: #ffffff;
        font-size: 0.18rem;
        font-family: PingFang;
        line-height: 0.17rem;
      }

      .text_2 {
        margin-left: 0.015rem;
        margin-top: 0.17rem;
        color: #ffffff;
        font-size: 0.14rem;
        font-family: PingFang;
        line-height: 0.16rem;
        max-width: 40vw;
      }
    }

    .image_2 {
      border-radius: 50%;
      align-self: center;
      width: 0.8rem;
      height: 0.8rem;
      margin: 0 0.3rem;
    }

    .group_3 {
      margin-top: 0.14rem;

      .text-wrapper {
        padding: 0.03rem 0 0.03rem;
        background-color: #ffffff;
        border-radius: 0.11rem;
        width: 0.6rem;
        height: 0.22rem;
        border: solid 0.005rem #f6f7fa;

        .text_2 {
          color: #2e9bff;
          font-size: 0.13rem;
          font-family: PingFang;
          line-height: 0.16rem;
        }
      }

      .text-wrapper_1 {
        margin-left: 0.075rem;
        padding: 0.03rem 0 0.03rem;
        background-color: #ffffff;
        border-radius: 0.11rem;
        width: 0.6rem;
        height: 0.22rem;
        border: solid 0.005rem #f6f7fa;

        .text_3 {
          color: #2e9bff;
          font-size: 0.13rem;
          font-family: PingFang;
          line-height: 0.16rem;
        }
      }
    }
  }

  .group_4 {
    padding: 0.09rem 0.02rem 0.085rem;

    .image_3 {
      margin-bottom: 0.02rem;
      width: 0.13rem;
      height: 0.11rem;
    }

    .text_4 {
      margin-left: 0.025rem;
      color: #2e9bff;
      font-size: 0.13rem;
      font-family: PingFang;
      line-height: 0.13rem;
    }
  }
}

.detil {
  .section_7 {
    margin-top: 0.01rem;
    padding: 0.05rem 0.12rem 0.2rem 0.17rem;
    background-color: rgb(255, 255, 255);

    .text-wrapper_2 {
      margin-right: 0.03rem;
      padding: 0.16rem 0 0.095rem;
      color: rgb(55, 59, 72);
      font-size: 0.15rem;
      font-family: PingFang;
      line-height: 0.14rem;
      background-color: rgb(255, 255, 255);
      box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);

      .text_10 {
        margin-left: 0.015rem;
      }
    }

    .group_7 {
      margin-top: 0.15rem;
      padding-left: 0.015rem;

      .text_11 {
        color: rgb(55, 59, 72);
        font-size: 0.15rem;
        font-family: PingFang;
        line-height: 0.14rem;
      }

      .text_12 {
        margin: 0.015rem 0;
        color: rgb(160, 162, 172);
        font-size: 0.15rem;
        font-family: PingFang;
        line-height: 0.12rem;
      }
    }

    .group_8 {
      margin-top: 0.16rem;
      padding: 0 0.015rem;

      .text_13 {
        color: rgb(55, 59, 72);
        font-size: 0.15rem;
        font-family: PingFang;
        line-height: 0.14rem;
      }

      .text_14 {
        margin-top: 0.015rem;
      }

      .text_15 {
        color: rgb(160, 162, 172);
        font-size: 0.15rem;
        font-family: PingFang;
        line-height: 0.14rem;
      }

      .text_16 {
        margin-right: 0.03rem;
        margin-bottom: 0.02rem;
      }

      .text_18 {
        margin-right: 0.045rem;
        margin-bottom: 0.01rem;
      }

      .text_19 {
        margin-bottom: 0.01rem;
      }

      .text_20 {
        margin-right: 0.045rem;
        margin-top: 0.015rem;
      }
    }

    .view {
      margin-top: 0.14rem;
    }
  }

  .section_8 {
    margin-top: 0.2rem;
    padding: 0.05rem 0.14rem 0.06rem 0.17rem;
    background-color: rgb(255, 255, 255);
    position: relative;

    .text-wrapper_3 {
      padding: 0.16rem 0 0.1rem;
      color: rgb(55, 59, 72);
      font-size: 0.15rem;
      font-family: PingFang;
      line-height: 0.14rem;
      background-color: rgb(255, 255, 255);
      box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);

      .text_21 {
        margin-left: 0.01rem;
      }
    }

    .group_9 {
      margin-top: 0.15rem;
      padding: 0.035rem 0.56rem 0.46rem;
      position: relative;

      .text_22 {
        color: rgb(55, 59, 72);
        font-size: 0.15rem;
        font-family: PingFang;
        line-height: 0.14rem;
      }

      .text_23 {
        margin-left: 0.12rem;
        color: rgb(46, 155, 255);
        font-size: 0.1rem;
        font-family: PingFang;
        line-height: 0.14rem;
      }

      .color1 {
        color: rgb(21, 195, 73);
      }

      .color2 {
        color: red;
      }

      .color3 {
        color: #ff9900;
      }

      .group_10 {
        padding-top: 0.23rem;
        color: rgb(55, 59, 72);
        font-size: 0.15rem;
        font-family: PingFang;
        line-height: 0.14rem;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        position: absolute;

        .section_9 {
          padding: 0.03rem 0 0.23rem;
          background-color: rgb(255, 255, 255);
          box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);
          position: relative;

          .text_24 {
            margin-left: 0.56rem;
          }

          .text_25 {
            margin-left: 0.06rem;
          }

          .text_26 {
            margin-left: 0.035rem;
          }
        }

        .image_4 {
          width: 0.45rem;
          height: 0.45rem;
          position: absolute;
          left: 0.01rem;
          top: 0;
        }
      }
    }

    .group_11 {
      margin-top: 0.13rem;
      padding: 0 0.01rem;

      .image_5 {
        width: 0.45rem;
        height: 0.45rem;
      }

      .group_12 {
        margin-left: 0.095rem;
        flex: 1 1 auto;
        align-self: center;

        .group_14 {
          margin-top: 0.085rem;
          padding: 0 0.005rem;
          color: rgb(55, 59, 72);
          font-size: 0.15rem;
          font-family: PingFang;
          line-height: 0.14rem;

          .text_30 {
            margin-left: 0.06rem;
          }

          .text_31 {
            margin-left: 0.035rem;
          }
        }

        .text_27 {
          color: rgb(55, 59, 72);
          font-size: 0.15rem;
          font-family: PingFang;
          line-height: 0.14rem;
        }

        .text_28 {
          margin-left: 0.1rem;
          color: rgb(46, 155, 255);
          font-size: 0.15rem;
          font-family: PingFang;
          line-height: 0.14rem;
        }
      }
    }
  }

  .section_6 {
    margin-top: 0.01rem;
    padding: 0.14rem 0.1rem 0.07rem 0.21rem;
    background-color: rgb(255, 255, 255);

    .group_9 {
      margin-top: 0.12rem;
      padding: 0 0.01rem;

      .group_10 {
        margin-right: 0.05rem;

        .text_12 {
          align-self: flex-start;
          color: rgb(2, 2, 2);
          font-size: 0.18rem;
          font-family: Adobe Heiti Std;
          line-height: 0.17rem;
        }

        .text_13 {
          margin-top: 0.065rem;
          color: rgb(73, 76, 87);
          font-size: 0.15rem;
          font-family: Adobe Heiti Std;
          line-height: 0.24rem;
        }
      }

      .text_14 {
        margin-left: 0.015rem;
        margin-top: 0.065rem;
        align-self: flex-start;
        color: rgb(44, 109, 255);
        font-size: 0.14rem;
        font-family: PingFang;
        line-height: 0.14rem;
      }

      .equal-division {
        margin: 0.095rem 0.14rem 0 0.23rem;
        color: rgb(183, 183, 183);
        font-size: 0.14rem;
        font-family: PingFang;
        line-height: 0.11rem;

        .equal-division-item_1 {
          margin-left: 0.69rem;

          .text_16 {
            margin: 0.063rem 0 0 0.085rem;
          }
        }

        .equal-division-item_2 {
          margin-left: 0.69rem;

          .text_17 {
            margin: 0.063rem 0 0 0.085rem;
          }
        }

        .text_15 {
          margin: 0.063rem 0 0 0.085rem;
        }

        .image_6 {
          flex-shrink: 0;
          width: 0.2rem;
          height: 0.2rem;
        }
      }
    }

    .text_11 {
      margin-top: 0.035rem;
      color: rgb(184, 184, 184);
      font-size: 0.12rem;
      font-family: PingFang;
      line-height: 0.12rem;
    }

    .image_4 {
      width: 0.3rem;
      height: 0.3rem;
    }

    .image_5 {
      margin-bottom: 0.02rem;
    }

    .group_8 {
      margin-left: 0.07rem;
      margin-top: 0.02rem;

      .text_9 {
        color: rgb(2, 2, 2);
        font-size: 0.14rem;
        font-family: PingFang;
        line-height: 0.13rem;
      }

      .text_10 {
        margin-top: 0.055rem;
        color: rgb(184, 184, 184);
        font-size: 0.12rem;
        font-family: PingFang;
        line-height: 0.12rem;
      }
    }
  }
}

.group_16 {
  .section_6 {
    margin-left: 0.015rem;
    margin-right: 0.04rem;
    box-shadow: 0.0002rem 0.005rem rgba(0, 0, 0, 0.11);
    border-radius: 0.15rem 0.15rem 0px 0px;
    height: 1px;
  }
  .group_17 {
    justify-content: space-between;
    padding: 0.1rem;
    position: relative;

    .image_17 {
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 50%;
    }

    .group_18 {
      margin: 0.035rem 0 0.04rem 0.095rem;
      width: 65vw;
      .group_20 {
        margin-top: 0.09rem;
        color: #8d8e90;
        font-size: 0.12rem;
        line-height: 0.14rem;
        white-space: nowrap;
        > text {
          margin-left: 0.06rem;
        }
        > text:first-child {
          margin-left: 0;
        }
      }
      .text_24 {
        color: #373b48;
        font-size: 0.15rem;
        line-height: 0.14rem;
        white-space: nowrap;
      }
      .text_25 {
        margin-left: 0.04rem;
        font-size: 0.1rem;
        line-height: 0.14rem;
        white-space: nowrap;
      }
      .color1 {
        color: rgb(21, 195, 73);
      }

      .color2 {
        color: red;
      }

      .color3 {
        color: #ff9900;
      }
    }
    .group_18 > view:first-child {
      justify-content: space-between;
    }
  }
}
</style>
