dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterIntegralExchangeShop.vue

<template>
    <div class="userCenterIntegralExchangeShop">
        <div class="top">
            <div class="topLeft">
                <div class="swiper">
                    <el-carousel arrow="never" indicator-position="none" height="248px">
                        <el-carousel-item>
                            <img :src="'api/file/pub/' + shopDetail.picture" alt="" style="width: 100%; height: 100%" />
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="topRight">
                <div >
                    <span class="title" >{{$i18n.locale == "zh" ? shopDetail.commodityName :shopDetail.commodityNameEn}}</span>
                    <span v-if="shopDetail.commodityStatus==2" style="display: inline-block;text-align: center;width:80px;height:28px;line-height:28px; background-color:#f0f9eb;border:1px solid #eaf7e4;color:#5ec142;border-radius: 10px;">
                        {{ $i18n.locale == "zh" ? "已结束" : "Ended" }}
                    </span>
                </div>
                <div style="display: flex;justify-content: space-evenly; ">
                    <div class="integral">
                        <span class="info1">{{ shopDetail.point }}</span>
                        <span class="info2">{{
                        $i18n.locale == "zh" ? "积分" : "Integral"
                        }}</span>
                    </div>
                    <div v-if="shopDetail.price !== 0" class="integral">
                        <span class="info1" style="color: red; ">{{ shopDetail.price }}</span>
                        <span class="info2" style="color: red; ">
                            {{ $i18n.locale == 'zh' ? '元' : 'RMB' }}
                        </span>
                    </div>
            </div>
                <div class="gift">
                    <span class="info3">{{ $i18n.locale == "zh" ? "礼品类型" : "Gift Type" }}：</span>
                    <span class="info4">{{ determineCommodityType }}</span>
                </div>
                <div class="exchange">
                    <span class="info1">{{ $i18n.locale == "zh" ? "已兑换" : "Exchanged" }}：</span>
                    <span class="info2">{{
                    shopDetail.exchangeQuantity ? shopDetail.exchangeQuantity : "0"
                    }}</span>
                    <span class="info3">{{ $i18n.locale == "zh" ? "剩余" : "Surplus" }}：</span>
                    <span class="info4">{{
                    shopDetail.usageQuantity
                    }}</span>
                </div>
                <span>{{ $i18n.locale == "zh" ? "数量" : "Number" }}：</span>
                <el-input-number v-model="UmsPointCommodity.exchangeQuantity" :min="1"></el-input-number>
                <!-- <div class="number">
          <span class="info1"
          >{{ $i18n.locale == "zh" ? "数量" : "Number" }}：</span
          >
          <span class="info2">{{ shopDetail.inventoryQuantity }}</span>
        </div> -->
                </br>
                <el-button v-if="shopDetail.commodityStatus==2" :disabled="true" @click="exchange" type="info" style="margin-top: 20px">
                    <span class="info1">{{
                    $i18n.locale == "zh" ? "立即兑换" : "Exchange"
                    }}</span>
                </el-button>
                <el-button v-else :disabled="exchangeShopVisible" @click="exchange" type="primary" style="margin-top: 20px;" >
                    <span class="info1">{{
                    $i18n.locale == "zh" ? "立即兑换" : "Exchange"
                    }}</span>
                </el-button>
            </div>
        </div>
        <div class="center">
            <div class="rule">
                <span class="info">{{
                $i18n.locale == "zh" ? "规则信息" : "Rule Information"
                }}</span>
            </div>
            <div class="underline"></div>
            <div class="section">
                <span class="info1">{{ $i18n.locale == "zh" ? "兑换对象" : "Exchange Object" }}：
                    {{$i18n.locale ==
                    "zh"?shopDetail.exchangeObject=='V3,V2,V1'?'白银用户,黄金用户,铂金用户':shopDetail.exchangeObject=='V3,V2'?'黄金用户,铂金用户':shopDetail.exchangeObject=='V3,V1'?'白银用户,铂金用户':shopDetail.exchangeObject=='V2,V1'?'白银用户,黄金用户':shopDetail.exchangeObject=='V3'?'铂金用户':shopDetail.exchangeObject=='V2'?'黄金用户':'白银用户':
                    shopDetail.exchangeObject=='V3,V2,V1'?'Silver User,Gold User,Platinum
                    User':shopDetail.exchangeObject=='V3,V2'?'Gold User,Platinum
                    User':shopDetail.exchangeObject=='V3,V1'?'Silver User,Platinum
                    User':shopDetail.exchangeObject=='V2,V1'?'Silver User,Gold
                    User':shopDetail.exchangeObject=='V3'?'Platinum User':shopDetail.exchangeObject=='V2'?'Gold
                    User':'Silver User'}}</span>
                <!-- <span class="info2">{{ $i18n.locale == "zh" ? "兑换限制" : "Exchange Limit" }}：{{ shopDetail.exchangeRestrict }}</span> -->
                <span class="info3">{{
                $i18n.locale == "zh"
                ? "活动有效期"
                : "Validity Period Of The Activity"
                }}：
                    <span v-if="shopDetail.expirationType == 'y'">
                        {{ $i18n.locale == "zh" ? "长期有效" : "Long Term Effectiveness" }}
                    </span>
                    <span v-if="shopDetail.expirationType == 'n'">{{
                    shopDetail.validityStartDate | time("YYYY-MM-DD HH:mm:ss")
                    }}--{{
                        shopDetail.validityEndDate | time("YYYY-MM-DD HH:mm:ss")
                        }}</span>
                </span>
                <!--        <span class="info4"-->
                <!--        >{{ $i18n.locale == "zh" ? "活动限制" : "Activity Limit" }}：-->
                <!--          <span v-if="shopDetail.restrict == 'y'">-->
                <!--            {{ $i18n.locale == "zh" ? "仅限兑换" : "Exchange Only" }}&nbsp;&nbsp;{{ shopDetail.exchangeRestrict }}-->
                <!--          </span>-->
                <!--          <span v-else>-->
                <!--            {{ $i18n.locale == "zh" ? "无限制" : "No Limited" }}-->
                <!--          </span>-->
                <!--        </span>-->
                <span class="info5">{{
                $i18n.locale == "zh" ? "礼品介绍" : "Gift Introduction"
                }}</span>
                <div class="underline_01"></div>
                <div class="placeholder">
                    <span v-if="isZh" v-html="shopDetail.commodityDetailsHtml"></span>
                    <span v-if="!isZh" v-html="shopDetail.commodityDetailsHtmlEn"></span>
                </div>
            </div>
        </div>
        <div class="bottom">
            <!-- <div class="photo">
        <img
          :src="'api/file/pub/' + shopDetail.picture"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div> -->
            <!-- <div class="content">
        <span v-if="isZh">{{ shopDetail.commodityDetails | filterHtmlTag }}</span>
        <span v-if="!isZh">{{ shopDetail.commodityDetailsEn | filterHtmlTag }}</span>
      </div> -->
        </div>

        <!-- 商品兑换dialog -->
        <el-dialog title="商品兑换" :visible.sync="exchangeShopVisible" width="61%">
            <el-divider></el-divider>
            <div>
                <el-table ref="addressList1" v-loading="loading" highlight-current-row :data="addressList"
                    :header-cell-style="{
                      textAlign: 'center',
                      backgroundColor: '#f8f8f8',
                    }" border style="width: 100%" :before-close="shutDown">
                    <el-table-column prop="consignee" align="center"
                        :label="$i18n.locale === 'zh' ? '收货人' : 'Consignee'" width="150">
                    </el-table-column>
                    <el-table-column v-if="$i18n.locale == 'zh'" align="center"
                        :label="$i18n.locale === 'zh' ? '所在地区' : 'Region'" width="150">
                        <template slot-scope="scope">
                            {{ scope.row.province }}{{ scope.row.city }}{{ scope.row.area }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" :label="$i18n.locale === 'zh' ? '详细地址' : 'Address'" min-width="160">
                        <template slot-scope="scope">
                            {{ scope.row.address }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="postalCode" align="center" :label="$i18n.locale === 'zh' ? '邮编' : 'Postcode'"
                        width="150">
                    </el-table-column>
                    <el-table-column prop="mobile" align="center"
                        :label="$i18n.locale === 'zh' ? '联系方式' : 'Contact Information'" width="160">
                    </el-table-column>
                    <el-table-column align="center" :label="$i18n.locale === 'zh' ? '备注' : 'Remarks'" min-width="160">
                        <template slot-scope="scope">
                            <textarea class="el-inputUser" @blur="getText(scope.row)" :placeholder="$i18n.locale === 'zh' ?'我们会仔细阅读您所留下的信息，请放心填写！':'We will carefully read the information you left, please feel free to fill in!'" v-model="scope.row.userRemarks" style="border:none;resize:none;background-color: rgba(255, 255, 255, 0); min-height: 90px;max-height: 90px;min-width: 151px;max-width: 151px;font-size: 13px;color: #606266;"></textarea>
                            </template>
                    </el-table-column>
                    <el-table-column align="center" :label="$i18n.locale === 'zh' ? '操作' : 'Operate'" width="160">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status === '0'" type="text" size="small"
                                @click="chooseAddress(scope.row)">
                                {{ $i18n.locale === "zh" ? "选择地址" : "Choose Address" }}
                            </el-button>
                            <el-button v-if="scope.row.status === '1'" type="text" size="small">
                                {{ $i18n.locale === "zh" ? "默认地址" : "Default Address" }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change="
                  (val) => {
                    page.pageSize = val;
                  }
                " @current-change="
            (val) => {
              page.pageNo = val;
            }
          " layout="prev, pager, next" :total="page.total" :current-page="page.pageNo" :page-sizes="[10, 20, 50, 100]"
                    :page-size="page.pageSize" style="text-align: center; margin-top: 20px">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button v-if="this.createAddress" type="primary" @click="toCreateAddress()">{{
                $i18n.locale === "zh" ? "新建地址" : "Create Address"
                }}</el-button>
                <el-button type="primary" @click="confirmToExchangeGoods()">{{
                $i18n.locale === "zh" ? "确 定" : "Determine"
                }}</el-button>
                <el-button @click="exchangeShopVisible = false">{{
                $i18n.locale === "zh" ? "取 消" : "Cancel"
                }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import moment from "moment";
import {getToken} from "@/api/token";
import {
  exchangeUserPoints,
  exchangeUserPointsStatus,
  getUmsUserCommodityAddresss,
  getUserPointPage,
  getProductDetails,
  getMoney
} from "@/api/user";

export default {
  name: "userCenterIntegralExchangeShop",
  data() {
    return {
        userStauteInfo:{},
        shopStatus:'',
    userInfoS:'',
      shopDetail: "",
      exchangeShopVisible: false,
      addressList: [],
      loading: true,
      page: {
        pageNo: 1,
        pageSize: 5,
        total: 0,
      },
      UmsPointCommodity: {
        id: "", // 商品id
        exchangeQuantity: "", //商品数量
        userRemarks:'',//备注
      },
      isClick: false,
      userLevel: {},
      isZh: true,
      periodValidity: null,
      detailId: null,
      createAddress: null,
    };
  },
  watch: {
    page: {
      handler: function () {
        this.loading = true;
        this.toObtainAddressList();
      },
      deep: true,
    },
    addressList: function () {
      this.$nextTick(function () {
        this.$refs.addressList1.setCurrentRow(this.addressList[0]);
      });
    },
    "$i18n.locale": {

      handler: function () {
        if (this.$i18n.locale == "zh") {
          this.isZh = true;
        } else {
          this.isZh = false;
        }
      },
      deep: true,
    },
  },
  filters: {
    time(date, type) {
      return moment(date).format(type);
    },
    filterHtmlTag(t) {
      if (!t) return "";
      return t.toString().replace(/<.*?>/g, "");
    },
  },
  mounted() {
    let language = window.localStorage.getItem("locale");
    if (language == "zh") {
      this.isZh = true;
    } else {
      this.isZh = false;
    }
    this.detailId = window.localStorage.getItem("detailID");
    this.init();
  },
  methods: {
    init() {
      this.getProductDetails();
      this.user = JSON.parse(window.localStorage.getItem("user"));
      // 获取用户等级
      getUserPointPage().then((res) => {
        if (res) {
          this.userLevel = res.data.umsUserPoints;
        }
      });
    },
    getProductDetails() {
      getProductDetails(this.detailId).then((res) => {
        this.shopDetail = res.data.umsPointCommodity;
       
      });
    },
    // 兑换商品
    exchange() {
      this.exchangeShopVisible = true;
      this.toObtainAddressList();
    },
    toObtainAddressList() {
      // 获取地址列表
      let param = {
        pageSize: this.page.pageSize,
        pageNo: this.page.pageNo,
        // userId: this.user.userId,
      };
      getUmsUserCommodityAddresss(param)
          .then((res) => {
            let data = res.data
            if (JSON.stringify(data) !== "{}") {
              this.addressList = res.data.umsUserCommodityAddresss;
              this.page.total = Number(res.data.page.totalCount);
              this.createAddress = false;
            } else {
              this.createAddress = true;
            }
          })
          .then(() => {
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
    },
    // 确定兑换商品
    confirmToExchangeGoods() {
        console.log(this.isClick,'答案');
        this.exchangeShopVisible = false;
        if (this.isClick == false) {
            var params = {
            id: this.shopDetail.id,
            exchangeQuantity: this.UmsPointCommodity.exchangeQuantity,
            userRemarks:this.userStauteInfo.userRemarks
            };
            var userAddressId=this.addressList[0].id
        } else {
            this.UmsPointCommodity.userRemarks=this.userStauteInfo.userRemarks
            var params = this.UmsPointCommodity;
            var userAddressId=this.userStauteInfo.id
        }
        console.log(params,userAddressId,'好多地址');
        getToken().then((res)=>{
            exchangeUserPointsStatus(JSON.stringify(params),userAddressId,res.data).then((res)=>{
                if(this.$i18n.locale.toUpperCase() == "ZH"){
                    this.$message({
                    message: "下单成功",
                    type: "success",
                    });
                    setTimeout(()=>{
                        this.$router.push('/userCenterMyOrder')
                    },1500)
                }else{
                    this.$message({
                    message: "Checkout success",
                    type: "success",
                    });
                }
            }).catch((error)=>{
                if(this.$i18n.locale.toUpperCase() == "ZH"){
                    this.$message({
                        message: "抱歉，您的权益不够，兑换失败。",
                        type: "warning",
                        });
                    }else{
                        this.$message({
                        message: "Insufficient rights, failed to place order. Sorry, your rights are insufficient, and redemption failed.",
                        type: "warning",
                        });
                    }
            })
        })
        //   getToken().then((res) => {
        //     exchangeUserPoints(JSON.stringify(data), res.data)
        //         .then((res) => {
        //           if(this.$i18n.locale.toUpperCase() == "ZH"){
        //             this.$message({
        //               message: "下单成功",
        //               type: "success",
        //             });
        //           }else{
        //             this.$message({
        //               message: "Exchange success",
        //               type: "success",
        //             });
        //           }
        //         })
        //         .catch((error) => {
        //           if(this.$i18n.locale.toUpperCase() == "ZH"){
        //             this.$message({
        //               message: "兑换失败",
        //               type: "warning",
        //             });
        //           }else{
        //             this.$message({
        //               message: "Exchange fail",
        //               type: "warning",
        //             });
        //           }
        //         });
        //   });
        this.isClick = false
    },
    //备注
    getText(row){
        this.userStauteInfo=row
    },
    // 选择地址
    chooseAddress(row) {
      this.isClick = true;
      this.userStauteInfo=row
      this.UmsPointCommodity.id = this.shopDetail.id;
      this.UmsPointCommodity.userRemarks=row.userRemarks
    },
    shutDown() {
      this.exchangeShopVisible = false;
    },
    toCreateAddress() {
      this.$router.push({
        path: "/userCenterMyOrder",
        query: {
          key: "2"
        }
      })
    }
  },
  computed: {
    //  判断是否在有效期内
    effectiveDate() {
      let start = this.shopDetail.validityStartDate;
      let end = this.shopDetail.validityEndDate;
      let currentTime = new Date().getTime();
      if (this.shopDetail.expirationType === "n") {
        if (currentTime >= start && currentTime <= end) {
          this.periodValidity = true;
        } else {
          this.periodValidity = false;
        }
      }
    },

    // 判断用户等级
    determineUserLevel() {
      return false;
    },

    // // 判断等级名称
    // judgeClassName() {
    //   let val = this.shopDetail.exchangeObject
    //   if(val){
    //     console.log(val,'加载了多次');
    //   let className = '';
    //   if (this.isZh) {
    //     if(val.includes('v1')){
    //       className +="白银用户";
    //     }
    //     if(val.includes('v2')){
    //       className +=",黄金用户";
    //     }
    //     if(val.includes('v3')){
    //       className +=",铂金用户";
    //     }
    //   } else {
    //     if(val.includes('v1')){
    //       className +="Silver User";
    //     }
    //     if(val.includes('v2')){
    //       className +=",Gold User";
    //     }
    //     if(val.includes('v3')){
    //       className +=",Platinum User";
    //     }
    //   }
    //   return className;
    //   }else{
    //     return false
    //   }
     
    // },


    // // 判断等级名称
    // judgeClassName() {
    //   if (this.isZh) {
    //     if (this.shopDetail.exchangeObject === "vip0") {
    //       return "白银用户";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip1") {
    //       return "黄金用户";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip2") {
    //       return "铂金用户";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip3") {
    //       return "星钻用户";
    //     }
    //     if (this.shopDetail.exchangeObject === "all") {
    //       return "所有用户";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip0,vip1,vip2") {
    //       return "白银用户，黄金用户，铂金用户";
    //     }

    //     if (this.shopDetail.exchangeObject === "vip3,vip2,vip1,vip0") {
    //       return "白银用户，黄金用户，铂金用户，星钻用户";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip0,vip1,vip2,vip3") {
    //       return "白银用户，黄金用户，铂金用户，星钻用户";
    //     }
    //   } else {
    //     if (this.shopDetail.exchangeObject === "vip0") {
    //       return "Silver User";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip1") {
    //       return "Gold User";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip2") {
    //       return "Platinum User";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip3") {
    //       return "Star User";
    //     }
    //     if (this.shopDetail.exchangeObject === "all") {
    //       return "All Users";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip0,vip1,vip2") {
    //       return "Silver User，Gold User，Platinum User";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip3,vip2,vip1,vip0") {
    //       return "Silver User，Gold User，Platinum User，Star User";
    //     }
    //     if (this.shopDetail.exchangeObject === "vip0,vip1,vip2,vip3") {
    //       return "Silver User，Gold User，Platinum User，Star User";
    //     }
    //   }
    //   // vip3,vip2,vip1,vip0
    // },
    // 企业用户
    // enterpriseCustomers(){
    //   return false
    // },

    // 判断商品类型
    determineCommodityType() {
      if (this.isZh) {
        if (this.shopDetail.commodityType == "1") {
          return "实体礼品";
        } else {
          return "虚拟礼品";
        }
      } else {
        if (this.shopDetail.commodityType == "1") {
          return "Physical Gifts";
        } else {
          return "Virtual Gifts";
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.userCenterIntegralExchangeShop {
  width: 100%;
  background: #fff;
  min-height: 800px;
  .el-inputUser{
    height: 94px;
  }
  .top {
    width: 100%;
    display: flex;
    // justify-content: space-between;
    .topLeft {
      height: 344px;
      background-color: rgba(207, 215, 228, 0.8);
      margin-left: 15px;
      width: 384px;
      display: flex;
      justify-content: center;
      align-items: center;

      .swiper {
        width: 200px;
        height: 248px;

        .el-carousel ::v-deep .el-carousel__indicators--horizontal {
          height: 5vh;
          left: 85%;
          bottom: 2vh;
        }

        .el-carousel
        ::v-deep
        .el-carousel__indicator--horizontal
        .el-carousel__button {
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 50%;
        }

        .el-carousel ::v-deep .is-active .el-carousel__button {
          background: rgba(243, 150, 0, 1);
          width: 0.5rem;
          border-radius: 0.5rem;
        }
      }
    }

    .topRight {
      width: 420px;
      height: 339px;
      margin: 11px 0 0 32px;
      .title {
        width: 420px;
        height: 40px;
        overflow-wrap: break-word;
        color: rgba(44, 85, 138, 1);
        font-size: 30px;
        font-family: PingFangSC-Semibold;
        line-height: 40px;
        text-align: left;
        margin-right: 10px;
      }

      .integral {
        display: flex;
        justify-content: space-evenly;
        height: 36px;
        margin-top: 40px;

        .info1 {
          width: 70%;
          height: 36px;
          display: inline-block;
          overflow-wrap: break-word;
          color: rgba(243, 150, 0, 1);
          font-size: 36px;
          font-family: PingFangSC-Semibold;
          white-space: nowrap;
          line-height: 36px;
          text-align: center;
        }

        .info2 {
          width: 30%;
          height: 24px;
          line-height: 24px;
          display: inline-block;
          overflow-wrap: break-word;
          color: rgba(243, 150, 0, 1);
          font-size: 24px;
          text-align: center;
          white-space: nowrap;
          margin-left: 10px;
          margin-top: 7px;
        }
      }

      .gift {
        display: flex;
        justify-content: space-between;
        width: 170px;
        height: 30px;
        margin-top: 22px;

        .info3 {
          width: 80px;
          height: 30px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
        }

        .info4 {
          width: 64px;
          height: 30px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: PingFangSC-Medium;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
        }
      }

      .exchange {
        display: flex;
        justify-content: space-between;
        width: 338px;
        height: 30px;
        margin-top: 5px;

        .info1 {
          display: block;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
        }
        .info2 {
          width: 20px;
          height: 30px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: PingFangSC-Medium;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
          margin-left: 42px;
        }

        .info3 {
          width: 48px;
          height: 30px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
          margin-left: 84px;
        }

        .info4 {
          width: 64px;
          height: 30px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: PingFangSC-Medium;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
          margin-left: 16px;
        }
      }

      .number {
        display: flex;
        justify-content: space-between;
        width: 126px;
        height: 30px;
        margin-top: 5px;

        .info1 {
          display: block;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
        }

        .info2 {
          width: 20px;
          height: 30px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: PingFangSC-Medium;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
        }
      }

      .button {
        height: 36px;
        border-radius: 2px;
        border: 1px solid rgba(41, 144, 255, 1);
        margin-top: 34px;
        width: 104px;

        .info1 {
          display: block;
          overflow-wrap: break-word;
          color: rgba(41, 144, 255, 1);
          font-size: 16px;
          font-family: HiraginoSansGB-W6;
          white-space: nowrap;
          line-height: 16px;
          text-align: justify;
          margin: 5px 0 0 10px;
        }
      }
    }
  }

  .center {
    .rule {
      .info {
        width: 64px;
        height: 16px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(44, 85, 138, 1);
        font-size: 16px;
        font-family: PingFangSC-Semibold;
        white-space: nowrap;
        line-height: 18px;
        text-align: left;
        margin: 30px 0 0 25px;
      }
    }

    .underline {
      width: 84px;
      height: 1px;
      background-color: rgba(44, 85, 138, 1);
      margin: 16px;
    }

    .section {
      width: 880px;
      // height: 526px;
      margin: 21px 0 0 17px;

      .info1 {
        width: 202px;
        height: 30px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        white-space: nowrap;
        line-height: 30px;
        text-align: left;
      }

      .info2 {
        width: 202px;
        height: 30px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        white-space: nowrap;
        line-height: 30px;
        text-align: left;
        margin-top: 30px;
      }

      .info3 {
        width: 186px;
        height: 30px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        white-space: nowrap;
        line-height: 30px;
        text-align: left;
        margin-top: 30px;
      }

      .info4 {
        width: 161px;
        height: 30px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        white-space: nowrap;
        line-height: 30px;
        text-align: left;
        margin-top: 30px;
      }

      .info5 {
        width: 64px;
        height: 16px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(44, 85, 138, 1);
        font-size: 16px;
        font-family: PingFangSC-Semibold;
        white-space: nowrap;
        line-height: 16px;
        text-align: left;
        margin: 30px 0 0 10px;
      }

      .underline_01 {
        width: 84px;
        height: 1px;
        background-color: rgba(44, 85, 138, 1);
        margin-top: 16px;
      }

      .placeholder {
        width: 880px;
        // height: 210px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        line-height: 30px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .bottom {
    .photo {
      margin: 0 auto;
      width: 440px;
      height: 536px;
      // background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9127c07d0e073b678a476e6deaecf78b1d699e6d40fb22e1c719a29fb1962b98)
      //   100% no-repeat;
    }

    .content {
        
      width: 880px;
      height: 210px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(51, 51, 51, 1);
      font-size: 16px;
      line-height: 30px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 57px 0 0 10px;
    }
  }
}
</style>