<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
     <el-row class="last">
       <p><span>搜索条件</span> <i></i></p>
       <el-col :span="8">
         <el-form-item label="开始时间" prop="startTime">
           <el-date-picker  clearable
             v-model="queryParams.startTime"
             type="date"
             value-format="yyyy-MM-dd"
             placeholder="请选择开始时间">
           </el-date-picker>
         </el-form-item>
       </el-col>
           <el-col :span="8">
            <el-form-item label="人员姓名" prop="userName">
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入人员姓名"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
           </el-col>

       			 <el-col :span="8">
       			   <el-form-item label="打卡情况" prop="kaType">
       			   <el-select v-model="queryParams.kaType" placeholder="请选择打卡情况" clearable>
       			     <el-option
       			       v-for="dict in dict.type.kaoqin_abnormal"
       			       :key="dict.value"
       			       :label="dict.label"
       			       :value="dict.value"
       			     />
       			   </el-select>
       			   </el-form-item>
       			 </el-col>
             <el-col :span="8">
               <el-form-item label="结束时间" prop="endTime">
                 <el-date-picker clearable
                   v-model="queryParams.endTime"
                   type="date"
                   value-format="yyyy-MM-dd"
                   placeholder="请选择结束时间">
                 </el-date-picker>
               </el-form-item>
             </el-col>


       <el-col :span="8">
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-col>
       <el-col :span="8">

       </el-col>
     </el-row>
    </el-form>
     <div class="navde">
       <el-row :gutter="10" class="mb8" style="background-color: #fafafa ;padding-top: 0;">
         <el-col :span="24">
           <div style="display: flex; align-items: center;justify-content: space-between;">
             <p style="border-left: 5px solid #3F73FD;padding-left: 5px;"><span>打卡记录</span> </p>
             <div>
           <el-button
             type="danger"
             plain
             size="mini"
             :disabled="multiple"
             @click="handleDelete"
             v-hasPermi="['system:record:remove']"
           >删除</el-button>
           <el-button
             type="primary"
             size="mini"
             @click="handleExport"
             v-hasPermi="['system:record:export']"
           >导出</el-button>
           <el-button
             type="primary"
             size="mini"
             @click="handleExportbb"
             v-hasPermi="['system:record:export']"
           >报表</el-button>
             </div>
           </div>
         </el-col>


         <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
       </el-row>
       <div v-masonry style="display: flex; justify-content: flex-start; flex-wrap: wrap; ">
         <div v-masonry-tile class="group_8 flex-col" style="background-color: #fff; margin-right: 5px; margin-left: 5px; margin-bottom: 10px;" v-for="(item,index) in recordList">
                     <div class="section_2 flex-row" style="justify-content: space-between;" @click="handleSelectionChange(item)">
                       <div class="image-text_2 flex-row justify-between" >
                         <img
                           class="thumbnail_20"
                           referrerpolicy="no-referrer"
                           src="../../../assets/images/icon_rylb_ry.png"
                         />
                         <span class="text-group_2" style="margin-left: 10px;">{{item.userName == null?'暂无数据' : item.userName}}</span>
                       </div>
                       <div style="display: flex;">
                         <div class="box_5 flex-col">
                           <img src="../../../assets/images/icon_lby_gx_normal.png" alt="" v-if="!item.isnum && isgsow">
                           <img src="../../../assets/images/icon_lby_gx_selected.png" alt="" v-if="item.isnum && isgsow">
                         </div>
                        <!-- <img
                           class="thumbnail_21"
                           referrerpolicy="no-referrer"
                           src="https://lanhu-oss-2537-2.lanhuapp.com/ps4zxep6qnsqizbyfr86uoyrgegqz62d38l7f94b974-c52c-4ee6-8473-06e7329cb92e"
                         /> -->
                       </div>
                     </div>
                     <img
                       class="image_2"
                       referrerpolicy="no-referrer"
                       src="https://lanhu-oss-2537-2.lanhuapp.com/ps2ivkxa6dhy5173lwe8uhwdws00obqc648790f182-ec11-47f3-aac4-ca0b4ad9e851"
                     />
                     <div class="text-group_3 flex-col justify-between">
                       <div class="text-wrapper_7">
                         <span class="text_23">手机号码：</span>
                         <span class="paragraph_1">{{item.phone == null?'暂无数据' : item.phone}}<br /></span>
                      <!--  <span class="text_24">打卡记录时间：</span>
                         <span class="paragraph_2">25-06-19&nbsp;08:53<br /></span> -->
                         <span class="text_25">星期：</span>
                         <span class="paragraph_3">星期{{item.kaWeek}}<br /></span>
                       </div>
                       <div>
                         <el-tooltip class="item" effect="dark" :content="item.time" placement="top-start">
                            <div  class="text-wrapper_8" style="display:flex; word-wrap: break-word; word-break: normal; align-items: center;">
                              <span class="text_28">打卡时间：</span>
                              <div v-html="item.time" class="syueg" style="color: #3d455b; font-size: 14px; line-height: 20px; font-weight: 400;margin: 0; width: 75%; " >
                                </div>
                            </div>
                         </el-tooltip>
                            <div  class="text-wrapper_8" style="display:flex; word-wrap: break-word; word-break: normal; align-items: center;">
                              <span class="text_28">打卡状态：</span>
                              <div v-if="item.type == '暂无数据'" v-html="item.type" class="syueg" style="color: #3d455b; font-size: 14px; line-height: 20px; font-weight: 400;margin: 0; width: 75%; " >
                              </div>
                              <div  v-else class="syueg" style="color: #3d455b; font-size: 14px; line-height: 20px; font-weight: 400;margin: 0; width: 75%; display: flex;" >
                              <dict-tag style="margin-right: 3px;" :options="dict.type.kaoqin_abnormal" :value="itemr - 0" v-for="(itemr,ik) in item.type" :key="ik"/>
                              </div>
                            </div>
                           <el-tooltip class="item" effect="dark" :content="item.addree == null? '暂无数据' : item.addree" placement="top-start">
                          <div  class="text-wrapper_8" style="display:flex; word-wrap: break-word; word-break: normal;">
                            <span class="text_28" style="line-height: 18px;">打卡地点：</span>
                            <div v-html="item.addree" class="syueg" style="color: #3d455b; font-size: 14px; line-height: 20px; font-weight: 400;margin: 0; width: 75%; ">

                              </div>
                          </div>
                       </el-tooltip>
                       </div>
                     </div>
                      <div class="section_3 " v-if="item.pictureUrl != '暂无数据'">
                        <image-preview   :src="item.pictureUrl" :width="100 +'%'" :height="168"  style=""/>
                      </div>
                   </div>
       </div>
       <paginations
         v-show="total>0"
         :total="total"
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
     </div>





    <!-- 添加或修改考勤记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="打卡人id" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入打卡人id" />
        </el-form-item>
        <el-form-item label="部门id" prop="deptId">
          <el-input v-model="form.deptId" placeholder="请输入部门id" />
        </el-form-item>
        <el-form-item label="打卡时间 年" prop="kaYear">
          <el-input v-model="form.kaYear" placeholder="请输入打卡时间 年" />
        </el-form-item>
        <el-form-item label="打卡时间 月" prop="kaMonth">
          <el-input v-model="form.kaMonth" placeholder="请输入打卡时间 月" />
        </el-form-item>
        <el-form-item label="打卡时间 日" prop="kaDay">
          <el-input v-model="form.kaDay" placeholder="请输入打卡时间 日" />
        </el-form-item>
        <el-form-item label="打卡时间 星期" prop="kaWeek">
          <el-input v-model="form.kaWeek" placeholder="请输入打卡时间 星期" />
        </el-form-item>
        <el-form-item label="打卡时间年-月-日" prop="kaTime">
          <el-input v-model="form.kaTime" placeholder="请输入打卡时间年-月-日" />
        </el-form-item>
        <el-form-item label="打卡地点名称" prop="kaAddress">
          <el-input v-model="form.kaAddress" placeholder="请输入打卡地点名称" />
        </el-form-item>
        <el-form-item label="打卡地点经度" prop="kaLog">
          <el-input v-model="form.kaLog" placeholder="请输入打卡地点经度" />
        </el-form-item>
        <el-form-item label="打卡地点维度" prop="kaLat">
          <el-input v-model="form.kaLat" placeholder="请输入打卡地点维度" />
        </el-form-item>
        <el-form-item label="打卡分类 1:上午上班 2:上午下班 3:下午上班 4:下午下班" prop="kaSort">
          <el-input v-model="form.kaSort" placeholder="请输入打卡分类 1:上午上班 2:上午下班 3:下午上班 4:下午下班" />
        </el-form-item>
        <el-form-item label="打卡时间 -上午上班" prop="kaTimeAmIn">
          <el-date-picker clearable
            v-model="form.kaTimeAmIn"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择打卡时间 -上午上班">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="打卡时间 -上午下班" prop="kaTimeAmOut">
          <el-date-picker clearable
            v-model="form.kaTimeAmOut"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择打卡时间 -上午下班">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="打卡时间 -下午上班" prop="kaTimePmIn">
          <el-date-picker clearable
            v-model="form.kaTimePmIn"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择打卡时间 -下午上班">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="打卡时间 -下午下班" prop="kaTimePmOut">
          <el-date-picker clearable
            v-model="form.kaTimePmOut"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择打卡时间 -下午下班">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="图片预览" :visible.sync="opende" width="1000px" append-to-body style="text-align: center;">
      <img :src="defaultSettings.urls  + '/prod-api'+ urls" style="width: 80%;" >
     <!-- <video-player v-if="jeuhse == true" style="width: 960px; " class="video-player vjs-custom-skin" ref="videoPlayer" name="videoPlayer" id="video"
        :playsinline="true"  :options="playerOptions" @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)"
        @timeupdate="onPlayerTimeupdate($event)" @statechanged="playerStateChanged($event)"
        @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied"></video-player> -->
    </el-dialog>
  </div>
</template>

<script>
import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/kaoqin/record";
import store from '@/store'
const defaultSettings = require("@/settings.js");
import Masonry from "masonry-layout";
// import Waterfall from 'vue-waterfall-plugin'
export default {
  name: "Record",
   dicts: ['sys_normal_disable','kaoqin_abnormal','sys_yes_no' ],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      cinume:[{'value' : 2,'label':'一天两次'},{'value' : 4,'label':'一天四次'}],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 考勤记录表格数据
      recordList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      opende:false,
      defaultSettings,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        userId: null,
        deptId: null,
        kaYear: null,
        kaMonth: null,
        kaDay: null,
        kaWeek: null,
        kaTime: null,
        kaAddress: null,
        kaLog: null,
        kaLat: null,
        kaSort: null,
        kaTimeAmIn: null,
        kaTimeAmOut: null,
        kaTimePmIn: null,
        kaTimePmOut: null,
        kaType: null,
      },
      nji:true,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userId: [
          { required: true, message: "打卡人id不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "部门id不能为空", trigger: "blur" }
        ],
        kaYear: [
          { required: true, message: "打卡时间 年不能为空", trigger: "blur" }
        ],
        kaMonth: [
          { required: true, message: "打卡时间 月不能为空", trigger: "blur" }
        ],
        kaDay: [
          { required: true, message: "打卡时间 日不能为空", trigger: "blur" }
        ],
        kaWeek: [
          { required: true, message: "打卡时间 星期不能为空", trigger: "blur" }
        ],
        kaTime: [
          { required: true, message: "打卡时间年-月-日不能为空", trigger: "blur" }
        ],
        kaAddress: [
          { required: true, message: "打卡地点名称不能为空", trigger: "blur" }
        ],
        kaLog: [
          { required: true, message: "打卡地点经度不能为空", trigger: "blur" }
        ],
        kaLat: [
          { required: true, message: "打卡地点维度不能为空", trigger: "blur" }
        ],
        kaSort: [
          { required: true, message: "打卡分类 1:上午上班 2:上午下班 3:下午上班 4:下午下班不能为空", trigger: "blur" }
        ],
        kaTimeAmIn: [
          { required: true, message: "打卡时间 -上午上班不能为空", trigger: "blur" }
        ],
        kaTimeAmOut: [
          { required: true, message: "打卡时间 -上午下班不能为空", trigger: "blur" }
        ],
        kaTimePmIn: [
          { required: true, message: "打卡时间 -下午上班不能为空", trigger: "blur" }
        ],
        kaTimePmOut: [
          { required: true, message: "打卡时间 -下午下班不能为空", trigger: "blur" }
        ],
      },
      urls: '',
      tableMaxHeight:'200',
      columNameOptions:[],
      isgsow:true
    };
  },
  created() {
    // this.queryParams.deptId = store.getters.deptid
    // this.queryParams.userId = store.getters.userid
    this.getDicts("kaoqin_abnormal").then(response => {
          this.columNameOptions = response.data;
          console.log(this.columNameOptions)
        });
  if(this.$route.query.id != undefined){
    this.queryParams.kaType = this.$route.query.id
    this.queryParams.startTime = this.gettime()
    this.queryParams.endTime = this.gettime()
  }
    this.getList();
    window.onresize = () => {
          this.changeTableMaxHeight()
        }
        this.changeTableMaxHeight()
  },
  methods: {
    gettime() {
      var _this = this;
      let wk = new Date().getDay()
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      if(mm < 10){
        mm = '0'+mm
      }
      let dd = new Date().getDate();
      if(dd < 10){
        dd = '0'+dd
      }
      let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let week = weeks[wk]
      let nhgw = yy + '-' + mm+'-'+dd
      // _this.getyer = yy;
      // _this.getmor = mm;
      // _this.getday = dd;
      // _this.getshifL = hh + ':' + mf;
      // _this.getweek = week;
      // console.log(this.gettime)
      return nhgw
    },
    /** 查询考勤记录列表 */
    getList() {
      this.loading = true;
      listRecord(this.queryParams).then(response => {
        this.recordList = response.rows;
        if(this.recordList.length !=0){
          this.recordList.filter(rou=>{
            rou.isnum = false
            rou.kaWeek = this.getweii(rou.kaWeek)
            if(rou.kaNum == 2){
              rou.pictureUrl = this.gethstwo(rou.kaAmInPhoto,rou.kaPmOutPhoto,2)
              rou.time =  this.gethstwo(rou.kaTimeAmIn,rou.kaTimePmOut, rou.kaTime)
              rou.addree =  this.gethstwo(rou.kaAddressAmIn,rou.kaAddressPmOut, )
              rou.type=this.gethstwo(rou.kaTypeAmIn,rou.kaTypePmOut)
            }else{
              rou.pictureUrl =  this.geths(rou.kaAmInPhoto,rou.kaAmOutPhoto,rou.kaPmInPhoto,rou.kaPmOutPhoto, 2)
              rou.time =  this.geths(rou.kaTimeAmIn,rou.kaTimeAmOut,rou.kaTimePmIn,rou.kaTimePmOut, rou.kaTime)
              rou.addree =  this.geths(rou.kaAddressAmIn,rou.kaAddressAmOut,rou.kaAddressPmIn,rou.kaAddressPmOut, )
              rou.type=this.geths(rou.kaTypeAmIn,rou.kaTypeAmOut,rou.kaTypePmIn,rou.kaTypePmOut)
            }
            if(rou.type !='暂无数据'){
              rou.type = rou.type.split('<br>')
              // console.log(rou.type)
            }

          })
        }
        console.log(this.recordList)
        this.total = response.total;
        this.loading = false;
      });
    },
    getweii(row){
      if(row == 1){
        row = '一'
      }
      if(row == 2){
        row = '二'
      }
      if(row == 3){
        row = '三'
      }
      if(row == 4){
        row = '四'
      }
      if(row == 5){
        row = '五'
      }
      if(row == 6){
        row = '六'
      }
      if(row == 7){
        row = '日'
      }
      return row
    },
    geths(row,row1,row2,row3,row5){
      let timeli= row + ','+row1 + ','+ row2 +',' + row3
      timeli = timeli.split(',')
      for(var i = 0 ; i <timeli.length; i++){
        if(timeli[i] == 'null' || timeli[i] == ''){
          timeli.splice(i,1)
        }
        if(timeli[i] == 'null' || timeli[i] == ''){
            timeli.splice(i,1)
        }
        if(timeli[i] == 'null' || timeli[i] == ''){
          timeli.splice(i,1)
        }
        if(timeli[i] == 'null' || timeli[i] == ''){
          timeli.splice(i,1)
        }
      }
      let time = ''
      console.log(timeli,81)
      if(timeli.length !=0){
        timeli.filter(rout=>{
          if(row5 != undefined){
            if(row5 == 2){
              if(time != ''){
                time = time + ',' + rout
              }else{
                time = rout
              }
            }else{
              rout = row5 +' ' + rout
              if(time != ''){
                time = time + '<br>' + rout
              }else{
                time = rout
              }
            }

          }else{
            if(time != ''){
              time = time + '<br>' + rout
            }else{
              time = rout
            }

          }

        })
      }else{
         time = '暂无数据'
      }
      // console.log(timeli,time)
      return time
    },
    gethstwo(row,row3,row5){
      let timeli= row  +',' + row3
      timeli = timeli.split(',')
      for(var i = 0 ; i <timeli.length; i++){
        if(timeli[i] == 'null' || timeli[i] == ''){
          timeli.splice(i,1)
        }
        if(timeli[i] == 'null' || timeli[i] == ''){
            timeli.splice(i,1)
        }
      }
      let time = ''
      console.log(timeli)
      if(timeli.length !=0){
        timeli.filter(rout=>{
          console.log(rout)
          if(row5 != undefined){
            if(row5 == 2){
              if(time != ''){
                time = time + ',' + rout
              }else{
                time = rout
              }
            }else{
              rout = row5 +' ' + rout
              if(time != ''){
                time = time + '<br>' + rout
              }else{
                time = rout
              }
            }

          }else{
            if(time != ''){
              time = time + '<br>' + rout
            }else{
              time = rout
            }

          }

        })
      }else{
         time = '暂无数据'
      }
      console.log(timeli,time)
      return time
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        recordId: null,
        userId: null,
        deptId: null,
        kaYear: null,
        kaMonth: null,
        kaDay: null,
        kaWeek: null,
        kaTime: null,
        kaAddress: null,
        kaLog: null,
        kaLat: null,
        kaSort: null,
        kaTimeAmIn: null,
        kaTimeAmOut: null,
        kaTimePmIn: null,
        kaTimePmOut: null,
        kaType: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.isgsow = false
      selection.isnum = !selection.isnum
      this.isgsow = true
      let nhseg= []
      this.recordList.filter(rou=>{
        if(rou.isnum == true){
          nhseg.push(rou)
        }
      })
      console.log(selection)
      this.ids = nhseg.map(item => item.recordId)
      this.single = nhseg.length!==1
      this.multiple = !nhseg.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加考勤记录";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const recordId = row.recordId || this.ids
      getRecord(recordId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改考勤记录";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.recordId != null) {
            updateRecord(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRecord(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const recordIds = row.recordId || this.ids;
      this.$modal.confirm('是否确认删除考勤记录编号为"' + recordIds + '"的数据项？').then(function() {
        return delRecord(recordIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('record/export', {
        ...this.queryParams
      }, `考勤记录${new Date().getTime()}.xlsx`)
    },
    handleExportbb() {
      this.download('kaoQin/export', {
        ...this.queryParams
      }, `考勤记录${new Date().getTime()}.xlsx`)
    },

    jksed(){

    },
    // 图片预览列表
    imagew(index) {
      this.urls = index
      this.opende = true
      var hyeowc = index
      console.log(hyeowc)
    },
    nml(e){
      console.log(e)
      if(e == 2){
        // 一天两次
        this.nji = false
      }else{
        this.nji = true
      }
    },
    // 获取屏幕高度
    showFilterForm () {
          this.filterActive = !this.filterActive
          this.changeTableMaxHeight()
        },

        changeTableMaxHeight () {
          let height = document.body.offsetHeight // 网页可视区域高度
          // if (this.filterActive) {
          //   this.tableMaxHeight = height - 320
          // } else {
            this.tableMaxHeight = height - 250
          // }
          console.log(height)
        }
  }
};
</script>
<style type="text/css" lang="scss">
  .image-slot{
    width: 100px;
    height: 100px;
    .el-icon-picture-outline{
      font-size: 28px;
      line-height: 4;
    }
  }
</style>
<style scoped lang="scss">

  .group_8 {
    width: 24%;
    padding: 0 20px;
    // height: 16px;
    overflow-wrap: break-word;
    color: rgba(61, 69, 91, 1);
    font-size: 16px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    // white-space: nowrap;

    // line-height: 80px;
  }
  .section_2 {
    // width: 246px;
    height: 16px;
    margin: 16px 0 0 0;
  }
  .image-text_2 {
    width: 74px;
    height: 16px;
  }
  .thumbnail_20 {
    width: 16px;
    height: 16px;
  }
  .text-group_2 {
    // width: 48px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(61, 69, 91, 1);
    font-size: 16px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }
  .box_5 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(230, 230, 230, 1);
    // margin: 1px 0 0 138px;
  }
  .thumbnail_21 {
    width: 2px;
    height: 12px;
    margin: 2px 0 0 18px;
  }
  .image_2 {
    // width: 287px;
    height: 1px;
    margin-top: 15px;
  }
  .text-group_3 {
    // width: 238px;
    // height: 152px;
    margin: 23px 0 0 0;
    padding-bottom: 20px;
  }
  .text-wrapper_7 {
    // width: 207px;
    // height: 104px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 20px;
  }
  .text_23 {
    width: 207px;
    height: 104px;
    overflow-wrap: break-word;
    color: rgba(34, 40, 56, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 30px;
  }
  .paragraph_1 {
    width: 207px;
    height: 104px;
    overflow-wrap: break-word;
    color: rgba(61, 69, 91, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 30px;
  }
  .text_24 {
    width: 207px;
    height: 104px;
    overflow-wrap: break-word;
    color: rgba(34, 40, 56, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 30px;
  }
  .paragraph_2 {
    width: 207px;
    height: 104px;
    overflow-wrap: break-word;
    color: rgba(61, 69, 91, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 30px;
  }
  .text_25 {
    width: 207px;
    height: 104px;
    overflow-wrap: break-word;
    color: rgba(34, 40, 56, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 30px;
  }
  .paragraph_3 {
    width: 207px;
    height: 104px;
    overflow-wrap: break-word;
    color: rgba(61, 69, 91, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 30px;
  }
  .text_26 {
    width: 207px;
    height: 104px;
    overflow-wrap: break-word;
    color: rgba(34, 40, 56, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 30px;
  }
  .text_27 {
    width: 207px;
    height: 104px;
    overflow-wrap: break-word;
    color: rgba(255, 105, 105, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 30px;
  }
  .text-wrapper_8 {
    // width: 238px;
    // height: 32px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 18px;
    margin-top: 8px;
  }
  .text_28 {
    width: 76px;
    height: 32px;
    overflow-wrap: break-word;
    color: rgba(34, 40, 56, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 32px;
  }
  .paragraph_4 {
    width: 238px;
    height: 32px;
    overflow-wrap: break-word;
    color: rgba(61, 69, 91, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 18px;
  }
  .section_3 {
    background-color: rgba(245, 249, 255, 1);
    border-radius: 4px;
    // width: 246px;
    height: 168px;
    // margin: 13px 0 16px 20px;
    margin-bottom: 20px;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .justify-between {
    display: flex;
    justify-content: space-between;
  }
  .syueg{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
