<template>
  <div class="detail">
    <div class="content"
         :style="contents">
      <div style="padding: 3px 16px;width: 100%;height:44px;margin-top: var(--app-safe-area-top);background:white;z-index: 999">
        <i style="font-size: 22px;color:#000;line-height:44px"
           class="awsui-iconfont"
           @click="backHome">&#xe708;</i><span class="titlespan">流程制度</span></div>
      <div class="items"
           style="margin-top: 22px;padding-bottom: 5px;">
        <span class="top">{{ title }}</span>
      </div>
      <div class="items rate"
           style="padding:0px 10px;">
        <ul class="list"
            style="background:#f9f9f9;border:0.333px solid #e9e9e9;border-radius: 3px; ">
          <li style="border-bottom:0;">
            <div class="icon"
                 style="width:40px; height: 40px;">
              <img v-show="userHeadImg!=''"
                   :src="userHeadImg"
                   alt=""
                   style="width:40px; height: 40px;">
            </div>
            <div class="left">
              <div class="title">
                {{ userName }} | {{ department }}
              </div>
              <div class="description rate_info">
                <i class="awsui-iconfont">&#xe722;</i><span>{{ browseNum }}</span>
                <i style="margin-left: 8px;"
                   class="awsui-iconfont">&#xe8f7;</i><span>{{ evaluate.evaluateNum }}</span>
              </div>
            </div>
            <div class="right"
                 v-show="isRate===1">
              <div class="score">
                <span>{{ score }}</span>
                <i v-show="showStar"
                   :style="openStar?'color:#1989fa':''"
                   @click="operateStar"
                   class="awsui-iconfont">&#xe716;</i>
              </div>
              <van-rate readonly
                        class="start"
                        :size="13"
                        void-icon="star"
                        void-color="#ddd"
                        v-model="start"/>
            </div>
          </li>
          <div class="center"
               :style="openStarStyle">
            <div class=""
                 :style="widthStyle">
              <div class="item">
                <div class="start">
                  <van-rate readonly
                            :size="7"
                            v-model="value"
                            void-icon="star"
                            void-color="#ddd"/>
                </div>
                <van-progress class="progress"
                              color="#ffd21e"
                              pivot-text=""
                              :percentage="percentage.fiveStar"/>
                <div class="percentage">{{ percentage.fiveStarBar }}</div>
              </div>
              <div class="item">
                <div class="start">
                  <van-rate readonly
                            :size="7"
                            :count="4"
                            v-model="value"
                            void-icon="star"
                            void-color="#ddd"/>
                </div>
                <van-progress class="progress"
                              color="#ffd21e"
                              pivot-text=""
                              :percentage="percentage.fourStar"/>
                <div class="percentage">{{ percentage.fourStarBar }}</div>
              </div>
              <div class="item">
                <div class="start">
                  <van-rate readonly
                            :size="7"
                            :count="3"
                            v-model="value"
                            void-icon="star"
                            void-color="#ddd"/>
                </div>
                <van-progress class="progress"
                              color="#ffd21e"
                              pivot-text=""
                              :percentage="percentage.threeStar"/>
                <div class="percentage">{{ percentage.threeStarBar }}</div>
              </div>
              <div class="item">
                <div class="start">
                  <van-rate readonly
                            :size="7"
                            :count="2"
                            v-model="value"
                            void-icon="star"
                            void-color="#ddd"/>
                </div>
                <van-progress class="progress"
                              color="#ffd21e"
                              pivot-text=""
                              :percentage="percentage.twoStar"/>
                <div class="percentage">{{ percentage.twoStarBar }}</div>
              </div>
              <div class="item">
                <div class="start">
                  <van-rate readonly
                            :size="7"
                            :count="1"
                            v-model="value"
                            void-icon="star"
                            void-color="#ddd"/>
                </div>
                <van-progress class="progress"
                              color="#ffd21e"
                              pivot-text=""
                              :percentage="percentage.oneStar"/>
                <div class="percentage">{{ percentage.oneStarBar }}</div>
              </div>
            </div>
          </div>
          <div v-show="openStar"
               class="bottom">
            您的评价：
            <van-rate :size="13"
                      void-icon="star"
                      void-color="#ddd"
                      v-model="start"
                      @change="browseCardInfo"/>
          </div>
        </ul>
      </div>
      <div v-show="description.length>0"
           class="card_content">
			<span class="description"
            v-html="description">
			</span>
      </div>
      <div class="divide"></div>
      <div class="items file"
           style="padding:0;">
        <div class="title"
             style="padding-top: 2px">
          附件
          <i class="awsui-iconfont"
             style="float:right;cursor: pointer;"
             @click="openpanel">&#xe719;</i>
        </div>
        <ul class="list filelist">
          <li v-for="(item,index) in list"
              :key="index">
            <div class="file_title"
                 @click="fileOperatePreview(item)">
              {{ item.fileName }}
            </div>
            <div class="file_info">
              <i class="awsui-iconfont"
                 v-html="getIcon(item.fileSuffixIcon)"></i>
              {{ formatSize(item.fileSize) }} | {{ item.createUsername }} | {{ item.createTime }}
              <span v-show="cardSetting.onlineLevel===1"
                    class="download"
                    @click="fileOperate(item)">
                <i class="awsui-iconfont download"
                   style="color: #4A90E2;">&#xe653;</i>
              </span>
            </div>
          </li>
        </ul>
      </div>
      <div class="divide"
           v-show="evaluate.list.length>0"></div>
      <div class="items"
           style="padding:0;">
        <ul class="list evaluate">
          <li v-for="(item,index) in evaluate.list"
              :key="index">
            <div class="icon"
                 style="width:40px;">
              <img :src="imgSrc(item.commentUserPhoto)"
                   alt=""
                   style="width:45px;">
            </div>
            <div class="left">
              <span class="title">
                {{ item.commentUsername }}
              </span>
              <span class="date">
                {{ item.commentTime }}
              </span>
              <div class="description">
                {{ item.commentContent }}
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div v-show="noContent">
        <div class="con"
             :style="noContentH">
          <div class="img">
            <img src="../assets/no_content.png"
                 alt=""
                 style="width: 125px;">
          </div>
          <div class="text">暂无数据</div>
        </div>
      </div>
    </div>
    <div class="footer"
         v-show="cardSetting.isComment==1">
      <span class="headImg"><img :src="currentUserPhoto"
                                 alt=""></span>
      <van-field
          class="field border"
          v-model="message"
          center
          placeholder="请输入评论内容..."
          @input="changeEmoji"
      >
        <template #button>
          <van-button size="small"
                      type="info"
                      @click="insertComment">提交
          </van-button>
        </template>
      </van-field>
    </div>
    <van-action-sheet v-model="show"
                      @close="closeSheet">
      <div class="content"
           style="width: 100%;padding: 20px 0px">
			  <span v-if="!retroactionflag">
				  <div v-show="showFavorite"
               class="options_op"
               @click="favorite">
					  <div class="icon">
						  <i v-if="hasFavorited"
                 class="awsui-iconfont">&#xe804;</i>
						  <i v-else
                 class="awsui-iconfont">&#xe83a;</i>
					  </div>
					  <div class="label">{{ hasFavorited ? "取消收藏" : "收藏" }}</div>
				  </div>
				  <div class="options_op"
               :style="showFavorite?'':'width:100%;'"
               @click="retroaction">
					  <div class="icon"><i class="awsui-iconfont">&#xe745;</i></div>
					  <div class="label">反馈</div>
				  </div>
			  </span>
        <div class="retroaction-panel"
             v-else>
          <van-field
              class="border"
              v-model="remarks"
              :autosize="{ maxHeight: 100, minHeight: 100 }"
              type="textarea"
              placeholder="反馈内容将发送给管理员"
          />
          <van-button class="retroaction-submit"
                      size="small"
                      type="info"
                      @click="reportCard">提交
          </van-button>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import awsuiAxios from "../awsuiAxios";

export default {
  name: "know-detail",
  data() {
    return {
      noContentH: "",
      initParams: {},
      kmsSetting: {},
      widthStyle: "",
      openStarStyle: "position:absolute;left:-1000px",
      noContent: false,
      showFavorite: false,
      showStar: false,
      openStar: false,
      contents: "",
      retroactionflag: false,
      cardSetting: {},
      remarks: "",
      value: 0,
      title: "",
      description: "",
      hasFavorited: false,
      list: [],
      currentUserPhoto: "",
      userHeadImg: "",
      department: "",
      userName: "",
      score: "0", //评分
      start: 0,  //星星数 必须是number类型
      browseNum: "0", //浏览人数
      evaluate: {
        evaluateNum: "0", //评价人数
        list: []
      },
      percentage: {
        fiveStar: 0,
        fourStar: 0,
        threeStar: 0,
        twoStar: 0,
        oneStar: 0,
        fiveStarBar: "",
        fourStarBar: "",
        threeStarBar: "",
        twoStarBar: "",
        oneStarBar: ""
      },
      message: "",
      show: false,
      isRate: 0//是否显示评分,0:禁止；1：允许
    };
  },
  computed: {},
  methods: {
    imgSrc(path) {
      return path.replace("./df", this.getPath() + "df");
    },
    getNoRPath() {
      return this.getPath().replace("/", "").replace("./", "../");
    },
    getPath() {
      return axiosBaseUrl;
    },
    getIcon(fileSuffixIcon) {
      if (["jpg", "gif", "tif", "tiff", "bmp", "jpeg2000", "psd", "png", "svg", "pcx", "dxf", "wmf", "emf", "eps", "tga"].includes(fileSuffixIcon)) {
        return "&#xe74d;";
      } else if (["ppt", "pptx"].includes(fileSuffixIcon)) {
        return "&#xe7d4;";
      } else if (["doc", "docx"].includes(fileSuffixIcon)) {
        return "&#xe7ea;";
      } else if (["xls", "xlsx"].includes(fileSuffixIcon)) {
        return "&#xe7d0;";
      } else if (["pdf"].includes(fileSuffixIcon)) {
        return "&#xe684;";
      } else if (["zip"].includes(fileSuffixIcon)) {
        return "&#xe687;";
      } else {
        return "&#xe72b;";
      }
    },
    backHome() {
      window.history.back();
    },
    operateStar() {
      if (this.openStar) {
        this.noContentH = "top:65%";
        this.openStarStyle = "position:absolute;left:-1000px;";
      } else {
        this.noContentH = "top:73%";
        this.openStarStyle = "";
      }
      this.openStar = !this.openStar;
    },
    openpanel() {
      this.retroactionflag = false;
      this.show = true;
    },
    closeSheet() {
      this.remarks = "";
    },
    fileOperatePreview(obj) {
      let fileType = obj.fileNameNoVersion.lastIndexOf(".") > -1 ? obj.fileNameNoVersion.substring(obj.fileNameNoVersion.lastIndexOf(".") + 1, obj.fileNameNoVersion.length) : "";
      let tmpSetting = this.kmsSetting;
      let previewTypes = tmpSetting.browserPreview.split(",");
      let hasType = false;
      previewTypes.forEach((ob, index) => {
        if (ob == fileType) {
          hasType = true;
        }
      });
      let data = {};
      if (hasType) {// 浏览器直接预览，不调用onlinedoc
        data = {
          cmd: "com.actionsoft.apps.kms_knwl_browser_preview",
          fileId: obj.id
        };
      } else {
        if (tmpSetting.isOnlinedocAppActive) {
          //showFullScreenPanel
          data = {
            cmd: "com.actionsoft.apps.kms_knwl_center_preview_file",
            isDownload: this.cardSetting.onlineLevel === 1,
            isCopy: true,
            fileId: obj.id
          };
        } else {
          return;
        }
      }
      let that = this;
      localStorage.setItem("knowCarParams", JSON.stringify(this.initParams));
      awsuiAxios.post({
        url: "jd",
        data: data
      }).then(function (r) {
        if (r.result == "error") {
          that.$toast({message: r.data ? r.data.desc : r.msg, overlay: true});
        } else {
          let url = r.data.url;
          var head = document.location.origin + "/portal";
          if (url.indexOf("./df") > -1) {
            url = url.replace("./df", head + "/r/df");
          } else {
            url = url.replace("./w", head + "/r/w");
          }
          try {
            if (awsWebview.openWebviewPost(url, null) === false) {
              window.location.href = url;
            }
          } catch (e) {
          }
        }
      });
    },
    fileOperate(obj) {
      let $this = this;
      localStorage.setItem("knowCarParams", JSON.stringify(this.initParams));
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_center_download_file",
          fileId: obj.id
        }
      }).then((req) => {
        let data = req.data;
        if (data !== undefined && Object.keys(data).length > 0) {
          let url = data.downloadURL;
          window.open(url);
        }
      }).catch((err) => {
        $this.$message({
          type: "error",
          message: err.message
        });
      });
    },
    favorite() {
      let that = this;
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_center_collect_card",
          cardId: this.initParams.id
        }
      }).then(function (r) {
        if (r.result === "ok") { // 收藏成功
          that.hasFavorited = true;
          that.$toast({message: "收藏成功", overlay: true});
        } else if (r.result === "warning") { // 取消收藏成功
          that.hasFavorited = false;
          that.$toast({message: "取消收藏成功", overlay: true});
        }
        that.show = false;
      });
    },
    retroaction() {
      this.retroactionflag = true;
    },
    reportCard() {
      let that = this;
      if (this.remarks === "") {
        return that.$toast({message: "反馈内容不允许为空", overlay: false});
      }
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_center_report_card",
          cardId: this.initParams.id,
          dimensionId: this.initParams.dimensionId,
          reportContent: encodeURIComponent(this.remarks)
        }
      }).then(function (r) {
        if (r.result === "ok") { // 收藏成功
          that.$toast({message: "谢谢您的反馈", overlay: true});
          that.show = false;
          that.retroactionflag = false;
        }
      });
    },
    formatSize(size) {
      if (size == "0") {
        return "-";
      }
      size = parseFloat(size);
      let units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB", "BB"];
      let step = 1024;
      let unitIndex = 0;
      while (true) {
        if (size > 1024) {
          size = parseFloat(size / step).toFixed(2);
          unitIndex++;
        } else {
          break;
        }
      }
      return size + units[unitIndex];
    },
    browseCardInfo() {
      let that = this;
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_center_rate_card",
          cardId: this.initParams.id,
          rateId: this.cardSetting.rateId,
          rateLevel: this.start
        }
      }).then(function (r) {
        if (r.result === "error") {
        } else {
          that.$toast({message: "评分成功", overlay: true});
          that.refreshInfo();
        }
      });
    },
    insertComment(val) {
      if (this.message.trim() === "") {
        this.$toast({message: "评论内容不允许为空", overlay: true});
        return false;
      }
      if (this.message.trim().length > 1000) {
        this.$toast({message: "评论内容长度不能超过1000个字符", overlay: true});
        return false;
      }
      let that = this;
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_center_comment_insert",
          cardId: this.initParams.id,
          commentContent: this.message.trim()
        }
      }).then(function (r) {
        that.evaluate.evaluateNum++;
        that.evaluate.list.push(r.data.comment);
        that.noContent = false;
        that.message = "";
      });
    },
    commonOp(data) {
      this.showFavorite = data.showFavorite;
      this.list = data.files;
      this.cardSetting = data;
      if (data.isComment == 0) {
        this.contents = "height:" + window.innerHeight + "px";
      }
      this.department = data.createUserDept;
      this.userName = data.createUsername;
      this.browseNum = data.card.readCount;
      let starState = data.isRate != 1;
      if (starState) {
        this.showStar = false;
        this.openStar = false;
      } else {
        this.showStar = true;
      }
      this.userHeadImg = this.imgSrc(data.createUserPhoto);
      this.currentUserPhoto = this.imgSrc(data.currentUserPhoto);
      this.evaluate.list = data.comments;
      this.evaluate.evaluateNum = data.comments.length;
      this.noContent = data.comments.length == 0 && this.list.length == 0;
      this.lists = data.data;
      this.description = data.cardContext;
      this.title = data.cardName;
      this.isRate = data.isRate;
      if (data.isCollected) {
        this.hasFavorited = true;
      }
      let rates = data.rates;
      let rateUserCounts = rates["1"] + rates["2"] + rates["3"] + rates["4"] + rates["5"];
      this.start = data.rateLevel;
      if (rateUserCounts > 0) {
        var totalScore = rates["1"] * 1 + rates["2"] * 2 + rates["3"] * 3 + rates["4"] * 4 + rates["5"] * 5;
        var avgScore = (totalScore / (rates["1"] + rates["2"] + rates["3"] + rates["4"] + rates["5"])).toFixed(1);
        this.score = avgScore;
        this.percentage.fiveStar = ((rates["5"] / rateUserCounts) * 100);
        this.percentage.fourStar = ((rates["4"] / rateUserCounts) * 100);
        this.percentage.threeStar = ((rates["3"] / rateUserCounts) * 100);
        this.percentage.twoStar = ((rates["2"] / rateUserCounts) * 100);
        this.percentage.oneStar = ((rates["1"] / rateUserCounts) * 100);
        let fives = ((rates["5"] / rateUserCounts) * 100);
        let four = ((rates["4"] / rateUserCounts) * 100);
        let three = ((rates["3"] / rateUserCounts) * 100);
        let two = ((rates["2"] / rateUserCounts) * 100);
        let one = ((rates["1"] / rateUserCounts) * 100);
        this.percentage.fiveStarBar = fives == 0 ? "" : fives + "%";
        this.percentage.fourStarBar = four == 0 ? "" : four + "%";
        this.percentage.threeStarBar = three == 0 ? "" : three + "%";
        this.percentage.twoStarBar = two == 0 ? "" : two + "%";
        this.percentage.oneStarBar = one == 0 ? "" : one + "%";
      }
    },
    refreshInfo() {
      let params = this.initParams,
          that = this;
      if (!params.id) {
        return false;
      }
      // 获取知识列表数据
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_center_browse_card_info_json",
          cardId: params.id,
          isBorrow: false,
          boId: params.boId ? params.boId : "",
          isEdit: true,
          dimensionId: params.dimensionId
        }
      }).then(function (r) {
        that.loading = false;
        if (r.result == "error") {
          that.$toast({message: r.data ? r.data.desc : r.msg, overlay: true});
        } else {
          let data = r.data;
          that.commonOp(data);
        }
      });
    },
    getSettingFile() {
      // 获取知识列表数据
      let that = this;
      awsuiAxios.post({
        url: "jd",
        data: {
          cmd: "com.actionsoft.apps.kms_knwl_center_mobile_check_fullsearch"
        }
      }).then(function (r) {
        that.kmsSetting = r.data.setting;
      });
    },
    //屏蔽emoji表情输入
    changeEmoji() {
      let patt = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
      this.message = this.message.replace(patt, function (char) {
        if (char.length === 2) {
          return "";
        } else {
          return char;
        }
      });
    }
  },
  mounted() {
    if (window.ReactNativeWebView) {
      window.ReactNativeWebView.postMessage(JSON.stringify({
        type: 'headerShown',
        visible: false, // true 显示 false 隐藏
      }));
    }
    let h = window.innerHeight - 51;
    this.contents = "height:" + h + "px";
    this.widthStyle = "width:" + (window.innerWidth - 43) + "px";
    if (!this.$route.params || !this.$route.params.id) {
      let storgateParams = localStorage.getItem("knowCarParams");
      if (storgateParams != undefined && storgateParams != "") {
        this.initParams = eval("(" + storgateParams + ")");
        localStorage.setItem("knowCarParams", undefined);
      }
    } else {
      this.initParams = this.$route.params;
    }
    this.refreshInfo();
  },
  beforeDestroy() {
    if (window.ReactNativeWebView) {
      window.ReactNativeWebView.postMessage(JSON.stringify({
        type: 'headerShown',
        visible: true, // true 显示 false 隐藏
      }));
    }
  },
  created() {
    this.getSettingFile();
  }
};
</script>

<style scoped>
.detail {
  height: 100%;
}

.detail .content {
  border-top: 0.33px solid #e9e9e9;
  color: #666;
  height: calc(100% - 51px);
  overflow-y: auto;
  width: 100%;
}

.items {
  padding: 12px;
  position: relative;
}

.items span {
  display: inline-block;
}

.icon i {
  color: rgb(74, 144, 226);
}

.top {
  font-size: 16px;
  color: #666;
  font-weight: bold;
  line-height: 22px;
  padding-bottom: 10px;
  width: 100%;
  display: inline-block;
}

.description {
  max-height: 100px;
  line-height: 16px;
  color: #999;
  width: 100%;
}

.title {
  padding-bottom: 6px;
  line-height: 16px;
  padding: 12px;
  position: relative;
  align-items: center;
  font-size: 13px;
  color: black;
}

.title i {
  color: #666;
}

.list {
  padding: 0 12px;
  /*float: left;*/
  width: calc(100% - 24px);

  overflow-y: auto;
}

.list span, .list label {
  display: inline-block;
}

.list li {
  float: left;
  padding: 8px 0;
  width: 100%;
  position: relative;
  /*display: flex;*/
  justify-content: center;
  align-items: center;

}

.rate li, .file li {
  background: rgb(249, 249, 249);
}

.list li .icon {
  float: left;
  padding-right: 10px;
}


.list li .left {
  width: calc(100% - 125px);
  float: left;
}

.list li .left .title, .list li .right .name {
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #333;
  line-height: 18px;
  padding: 0 0 2px;
  border: 0;
  width: 100%;
  display: inline-block;
}

.list li .right .name {
  font-size: 12px;
  padding: 0;
}

.list li .left .description, .list li .right .time {
  color: #999999;
  line-height: 15px;
  font-size: 12px;
}

.list li .left .description .line {
  display: inline-block;
  margin: 0 6px;
  color: #E8E8E8;
}

.list li .right {
  width: 73px;
  text-align: right;
  float: right;
}

.list .li-more {
  padding: 0;
  border: none;
  height: 67px;
  line-height: 67px;
  width: 100%;
  display: none;
}

.list .li-more .more {
  color: #999;
  line-height: 20px;
  font-size: 13px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  width: 100%;
  letter-spacing: 1px;
}

.list .center {
  background: #f9f9f9;
}

.list .center .left {
  width: 66px;
  text-align: center;
  margin-right: 2px;
  float: left;
}

.right .score {
  color: #333;
  text-align: center;
}

.right .score span {
  font-weight: bold;
  color: #000;
}

.right .score i {
  font-size: 12px;
  position: absolute;
  right: 3px;
  top: 11px;
}

.list .center .item {
  /*float: left;*/
  line-height: 10px;
  width: 100%;
  display: flex;
  align-items: center;
}

.list .center .item .start {
  width: 44px;
  margin-right: 10px;
  float: left;
  text-align: right;
}

.list .center .item .progress {
  width: calc(100% - 80px);
  float: left;
  margin-right: 5px;
  top: 2px;
}

.list .center .item .percentage {
  width: 27px;
  font-size: 10px;
  float: left;
  color: #999;
  position: relative;
  top: 2px;
}

.list .bottom {
  float: left;
  line-height: 13px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 13px;
  border-top: 0.333px solid #e9e9e9;
  margin-top: 11px;
}

.evaluate li {
  display: flex;
}

.evaluate li .left {
  width: 100%;
}

.evaluate li .left .title {
  width: auto;
  padding: 0;
}

.evaluate li .date {
  color: #999;
  float: right;
  font-size: 12px;
}

.evaluate li .description {
  float: left;
}

.items .description {
  font-size: 13px;
}

.footer {
  position: fixed;
  border-top: 0.33px solid #e9e9e9;
  padding-left: 12px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 1;
  display: flex;
  align-items: center;
}

.footer .headImg {
  width: 30px;
  display: inline-block;
}

.headImg img {
  width: 30px;
}

.footer .field {
  width: calc(100% - 30px);
}

.footer .van-button {
  height: 28px;
  line-height: 28px;
  border-radius: 2px;
  padding: 0 8px !important;
}

.dropdown-menu {
  position: absolute;
  right: 12px;
  z-index: 10;
  top: 41px;
  background: #fff;
  padding: 2px 12px;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 2px 2px;
}

.dropdown-menu li {
  color: #999;
  padding: 8px 0;
  line-height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropdown-menu li .awsui-iconfont {
  margin-right: 10px;
}

.rate_info i {
  font-size: 12px;
  margin-right: 3px;
}

.divide {
  height: 10px;
  width: 100%;
  background: #f3f3f3;
  margin: 10px 0px;
  border-bottom: 0.333px solid #e9e9e9;
  border-top: 0.333px solid #e9e9e9;
}

.card_content {
  padding: 8px 6px 0px 12px;
  font-size: 14px;
}

.card_content .description {
  line-height: 19px;
}

p {
  margin: 0px !important;
  margin-block-start: auto !important;
  margin-block-end: auto !important;
}

.filelist li {
  border: 0.333px solid #e9e9e9;
  padding: 7px 5px;
  width: calc(100% - 14px);
  border-radius: 3px;
  margin-bottom: 10px;
}

.file_title {
  font-size: 14px;
  color: #378DEC;
  margin-bottom: 8px;
}

.file_info {
  font-size: 12px;
  color: #999;
}

.file_info i {
  font-size: 12px;
  color: #FFB800;
}

.file_info .download {
  float: right;
}

.con {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.con .img {
  width: 110px;
  height: 110px;
  margin: 0 auto;
}

.con .text {
  color: #999;
  line-height: 33px;
  font-size: 12px;
  width: 100%;
}
</style>
<style>
.my-swipe .van-swipe-item {
  height: 134px;
}

.start .van-rate__item:not(:last-child) {
  padding-right: 2px;
}

.list .center .right .item .start .van-rate__item:not(:last-child) {
  padding-right: 4px;
}

.footer .field .van-field__control {
  padding: 0 7px;
  font-size: 12px;
  position: relative;
  padding-left: 22px;
}

.footer .field::before {
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  font-family: "awsui-iconfont";
  content: "\e636";
  background: none;
  font-size: 14px;
  z-index: 10;
  height: 24px;
  color: #999;
}

.options_op {
  width: 50%;
  display: inline-block;
  text-align: center;
}

.options_op .icon {
  font-size: 16px;
  margin-bottom: 10px;
}

.options_op .label {
  font-size: 12px;

}

.retroaction-submit {
  width: calc(100% - 20px);
  margin-left: 10px;
}

.retroaction-panel textarea {
  border: 1px solid #e9e9e9;
  padding: 3px;
  -webkit-appearance: none;
}

.titlespan{
  display: flex;
  justify-content: center;
  margin-top: -34px;
  margin-right: 36px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 17px;
  color: #1A1A1A;
  line-height: 20px;
  font-style: normal;

}
</style>
