|  | @@ -0,0 +1,449 @@
 | 
	
		
			
				|  |  | +<!--
 | 
	
		
			
				|  |  | + * @Description: 合作院校详情
 | 
	
		
			
				|  |  | + * @Author: 空白格
 | 
	
		
			
				|  |  | + * @Date: 2022-08-16 10:40:45
 | 
	
		
			
				|  |  | + * @LastEditors: 空白格
 | 
	
		
			
				|  |  | + * @LastEditTime: 2022-08-16 11:44:55
 | 
	
		
			
				|  |  | + * @FilePath: \veterans_client_web\src\views\CooperativeColleges\CollegesDetails\CollegesDetailsIndex.vue
 | 
	
		
			
				|  |  | + * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 | 
	
		
			
				|  |  | +-->
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="app-main enterprise-details" v-loading="loading">
 | 
	
		
			
				|  |  | +    <div class="enterprise-details-header">
 | 
	
		
			
				|  |  | +      <div class="enterprise-details-header-box app-main-box">
 | 
	
		
			
				|  |  | +        <div class="edhb-left">
 | 
	
		
			
				|  |  | +          <div class="edhb-left-logo">
 | 
	
		
			
				|  |  | +            <el-avatar
 | 
	
		
			
				|  |  | +              shape="square"
 | 
	
		
			
				|  |  | +              :size="73"
 | 
	
		
			
				|  |  | +              :src="details.schoolLogoUrl"
 | 
	
		
			
				|  |  | +              @error="errorHandler"
 | 
	
		
			
				|  |  | +            >
 | 
	
		
			
				|  |  | +              <el-avatar
 | 
	
		
			
				|  |  | +                shape="square"
 | 
	
		
			
				|  |  | +                :size="73"
 | 
	
		
			
				|  |  | +                :src="require('@/assets/images/default-school.png')"
 | 
	
		
			
				|  |  | +              ></el-avatar>
 | 
	
		
			
				|  |  | +            </el-avatar>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +          <div class="edhb-left-info">
 | 
	
		
			
				|  |  | +            <div class="edhb-left-info-name">
 | 
	
		
			
				|  |  | +              {{ details.schoolName || "-" }}
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div
 | 
	
		
			
				|  |  | +              class="edhb-left-info-link"
 | 
	
		
			
				|  |  | +              @click="jumpExternalLink(details.schoolUrl)"
 | 
	
		
			
				|  |  | +            >
 | 
	
		
			
				|  |  | +              {{ details.schoolUrl || "-" }}
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <div class="edhb-right">
 | 
	
		
			
				|  |  | +          <div class="edhb-right-item">
 | 
	
		
			
				|  |  | +            {{ details.schoolNature | filtersDict(schoolNatureList) }}、{{
 | 
	
		
			
				|  |  | +              details.trainMethod || "-"
 | 
	
		
			
				|  |  | +            }}
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +          <div class="edhb-right-item">{{ details.linkPhone || "-" }}</div>
 | 
	
		
			
				|  |  | +          <div class="edhb-right-item position">
 | 
	
		
			
				|  |  | +            {{ details.schoolAddress || "-" }}
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +    <div class="app-main-box enterprise-details-main">
 | 
	
		
			
				|  |  | +      <!-- 学校信息 -->
 | 
	
		
			
				|  |  | +      <div class="app-main-box-content enterprise-details-main-info">
 | 
	
		
			
				|  |  | +        <!-- 学校信息 -->
 | 
	
		
			
				|  |  | +        <div class="edmi-introduce">
 | 
	
		
			
				|  |  | +          <h4>学校信息</h4>
 | 
	
		
			
				|  |  | +          <template v-if="details.detatil">
 | 
	
		
			
				|  |  | +            <div v-html="details.detatil"></div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +          <template v-else>
 | 
	
		
			
				|  |  | +            <div class="edmi-introduce-content">暂无学校信息</div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <!-- 学校相册 -->
 | 
	
		
			
				|  |  | +        <!-- <div class="edmi-album">
 | 
	
		
			
				|  |  | +          <h4>学校相册</h4>
 | 
	
		
			
				|  |  | +          <div
 | 
	
		
			
				|  |  | +            class="edmi-album-list"
 | 
	
		
			
				|  |  | +            v-if="
 | 
	
		
			
				|  |  | +              details.environmentUrlList && details.environmentUrlList.length
 | 
	
		
			
				|  |  | +            "
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +            <el-carousel
 | 
	
		
			
				|  |  | +              height="178px"
 | 
	
		
			
				|  |  | +              :autoplay="false"
 | 
	
		
			
				|  |  | +              arrow="never"
 | 
	
		
			
				|  |  | +              indicator-position="none"
 | 
	
		
			
				|  |  | +            >
 | 
	
		
			
				|  |  | +              <el-carousel-item
 | 
	
		
			
				|  |  | +                v-for="(item, Cindex) in details.environmentUrlList"
 | 
	
		
			
				|  |  | +                :key="Cindex"
 | 
	
		
			
				|  |  | +              >
 | 
	
		
			
				|  |  | +                <el-row :gutter="18">
 | 
	
		
			
				|  |  | +                  <el-col
 | 
	
		
			
				|  |  | +                    :xs="24"
 | 
	
		
			
				|  |  | +                    :sm="12"
 | 
	
		
			
				|  |  | +                    :md="12"
 | 
	
		
			
				|  |  | +                    :lg="6"
 | 
	
		
			
				|  |  | +                    :xl="6"
 | 
	
		
			
				|  |  | +                    v-for="(img, index) in item"
 | 
	
		
			
				|  |  | +                    :key="index"
 | 
	
		
			
				|  |  | +                  >
 | 
	
		
			
				|  |  | +                    <el-image
 | 
	
		
			
				|  |  | +                      :src="img"
 | 
	
		
			
				|  |  | +                      class="image"
 | 
	
		
			
				|  |  | +                      fit="contain"
 | 
	
		
			
				|  |  | +                      :preview-src-list="item"
 | 
	
		
			
				|  |  | +                    >
 | 
	
		
			
				|  |  | +                      <div slot="placeholder" class="image-slot">
 | 
	
		
			
				|  |  | +                        加载图片中<span class="dot">...</span>
 | 
	
		
			
				|  |  | +                      </div>
 | 
	
		
			
				|  |  | +                    </el-image>
 | 
	
		
			
				|  |  | +                  </el-col>
 | 
	
		
			
				|  |  | +                </el-row>
 | 
	
		
			
				|  |  | +              </el-carousel-item>
 | 
	
		
			
				|  |  | +            </el-carousel>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +          <el-empty v-else :image-size="80" description="无公司相册数据"></el-empty>
 | 
	
		
			
				|  |  | +        </div> -->
 | 
	
		
			
				|  |  | +        <!-- 双高专业 -->
 | 
	
		
			
				|  |  | +        <div class="edmi-position">
 | 
	
		
			
				|  |  | +          <h4>双高专业</h4>
 | 
	
		
			
				|  |  | +          <div
 | 
	
		
			
				|  |  | +            class="edmi-position-list"
 | 
	
		
			
				|  |  | +            v-if="details.twinList && details.twinList.length"
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +            <el-row :gutter="12">
 | 
	
		
			
				|  |  | +              <el-col
 | 
	
		
			
				|  |  | +                :xs="24"
 | 
	
		
			
				|  |  | +                :sm="24"
 | 
	
		
			
				|  |  | +                :md="24"
 | 
	
		
			
				|  |  | +                :lg="12"
 | 
	
		
			
				|  |  | +                :xl="12"
 | 
	
		
			
				|  |  | +                v-for="(item, index) in details.twinList"
 | 
	
		
			
				|  |  | +                :key="index"
 | 
	
		
			
				|  |  | +              >
 | 
	
		
			
				|  |  | +                <div class="edmi-position-list-item">
 | 
	
		
			
				|  |  | +                  <div class="epli-left">
 | 
	
		
			
				|  |  | +                    {{ item.professionName }}(专业代码:{{
 | 
	
		
			
				|  |  | +                      item.professionCode
 | 
	
		
			
				|  |  | +                    }})
 | 
	
		
			
				|  |  | +                  </div>
 | 
	
		
			
				|  |  | +                  <div class="epli-right">
 | 
	
		
			
				|  |  | +                    <span class="el-icon-arrow-right"></span>
 | 
	
		
			
				|  |  | +                  </div>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +              </el-col>
 | 
	
		
			
				|  |  | +            </el-row>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +          <el-empty
 | 
	
		
			
				|  |  | +            :image-size="80"
 | 
	
		
			
				|  |  | +            v-else
 | 
	
		
			
				|  |  | +            description="无双高专业数据"
 | 
	
		
			
				|  |  | +          ></el-empty>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <!-- 招生专业 -->
 | 
	
		
			
				|  |  | +        <div class="edmi-position">
 | 
	
		
			
				|  |  | +          <h4>招生专业</h4>
 | 
	
		
			
				|  |  | +          <div
 | 
	
		
			
				|  |  | +            class="edmi-position-list"
 | 
	
		
			
				|  |  | +            v-if="details.enrollList && details.enrollList.length"
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +            <el-row :gutter="12">
 | 
	
		
			
				|  |  | +              <el-col
 | 
	
		
			
				|  |  | +                :xs="24"
 | 
	
		
			
				|  |  | +                :sm="24"
 | 
	
		
			
				|  |  | +                :md="24"
 | 
	
		
			
				|  |  | +                :lg="12"
 | 
	
		
			
				|  |  | +                :xl="12"
 | 
	
		
			
				|  |  | +                v-for="(item, index) in details.enrollList"
 | 
	
		
			
				|  |  | +                :key="index"
 | 
	
		
			
				|  |  | +              >
 | 
	
		
			
				|  |  | +                <div class="edmi-position-list-item">
 | 
	
		
			
				|  |  | +                  <div class="epli-left">
 | 
	
		
			
				|  |  | +                    {{ item.professionName }}(专业代码:{{
 | 
	
		
			
				|  |  | +                      item.professionCode
 | 
	
		
			
				|  |  | +                    }})
 | 
	
		
			
				|  |  | +                  </div>
 | 
	
		
			
				|  |  | +                  <div class="epli-right">
 | 
	
		
			
				|  |  | +                    <span class="el-icon-arrow-right"></span>
 | 
	
		
			
				|  |  | +                  </div>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +              </el-col>
 | 
	
		
			
				|  |  | +            </el-row>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +          <el-empty
 | 
	
		
			
				|  |  | +            v-else
 | 
	
		
			
				|  |  | +            :image-size="80"
 | 
	
		
			
				|  |  | +            description="无招生专业数据"
 | 
	
		
			
				|  |  | +          ></el-empty>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import { getSchoolDetails } from "@/api/CooperativeColleges";
 | 
	
		
			
				|  |  | +import { getDictData } from "@/api/Dict";
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: "EnterpriseDetailsIndex",
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      details: {},
 | 
	
		
			
				|  |  | +      schoolNatureList: [],
 | 
	
		
			
				|  |  | +      loading: false,
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  created() {
 | 
	
		
			
				|  |  | +    this.getDict();
 | 
	
		
			
				|  |  | +    const { schoolId } = this.$route.query;
 | 
	
		
			
				|  |  | +    if (schoolId) {
 | 
	
		
			
				|  |  | +      this.getSchoolDetails(schoolId);
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    /**
 | 
	
		
			
				|  |  | +     * 获取字典
 | 
	
		
			
				|  |  | +     * @date 2022-08-11
 | 
	
		
			
				|  |  | +     * @returns {any}
 | 
	
		
			
				|  |  | +     */
 | 
	
		
			
				|  |  | +    getDict() {
 | 
	
		
			
				|  |  | +      getDictData({ key: "school_nature" }).then((res) => {
 | 
	
		
			
				|  |  | +        this.schoolNatureList = res.data;
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /**
 | 
	
		
			
				|  |  | +     * 获取院校详情
 | 
	
		
			
				|  |  | +     * @date 2022-08-15
 | 
	
		
			
				|  |  | +     * @param {any} schoolId
 | 
	
		
			
				|  |  | +     * @returns {any}
 | 
	
		
			
				|  |  | +     */
 | 
	
		
			
				|  |  | +    getSchoolDetails(schoolId) {
 | 
	
		
			
				|  |  | +      this.loading = true;
 | 
	
		
			
				|  |  | +      getSchoolDetails({ schoolId }).then((res) => {
 | 
	
		
			
				|  |  | +        this.details = res?.data;
 | 
	
		
			
				|  |  | +        this.loading = false;
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /**
 | 
	
		
			
				|  |  | +     * 加载logo错误触发
 | 
	
		
			
				|  |  | +     * @date 2022-08-15
 | 
	
		
			
				|  |  | +     * @returns {any}
 | 
	
		
			
				|  |  | +     */
 | 
	
		
			
				|  |  | +    errorHandler() {
 | 
	
		
			
				|  |  | +      return true;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /**
 | 
	
		
			
				|  |  | +     * 跳转外部链接
 | 
	
		
			
				|  |  | +     * @date 2022-08-16
 | 
	
		
			
				|  |  | +     * @param {any} link
 | 
	
		
			
				|  |  | +     * @returns {any}
 | 
	
		
			
				|  |  | +     */
 | 
	
		
			
				|  |  | +    jumpExternalLink(link) {
 | 
	
		
			
				|  |  | +      if (link) {
 | 
	
		
			
				|  |  | +        window.open(link);
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  filters: {
 | 
	
		
			
				|  |  | +    filtersDict(val, list) {
 | 
	
		
			
				|  |  | +      let label = "-";
 | 
	
		
			
				|  |  | +      list.forEach((item) => {
 | 
	
		
			
				|  |  | +        if (Number(val) === Number(item.text)) {
 | 
	
		
			
				|  |  | +          label = item.label;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +      return label;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style lang="scss" scoped>
 | 
	
		
			
				|  |  | +.enterprise-details {
 | 
	
		
			
				|  |  | +  &-header {
 | 
	
		
			
				|  |  | +    background-color: #43565f;
 | 
	
		
			
				|  |  | +    &-box {
 | 
	
		
			
				|  |  | +      margin: 0 auto;
 | 
	
		
			
				|  |  | +      padding: 36px 0;
 | 
	
		
			
				|  |  | +      display: flex;
 | 
	
		
			
				|  |  | +      justify-content: space-between;
 | 
	
		
			
				|  |  | +      .edhb-left {
 | 
	
		
			
				|  |  | +        display: flex;
 | 
	
		
			
				|  |  | +        &-logo {
 | 
	
		
			
				|  |  | +          margin-right: 13px;
 | 
	
		
			
				|  |  | +          :deep(.el-avatar) {
 | 
	
		
			
				|  |  | +            background-color: #65cafd;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        &-info {
 | 
	
		
			
				|  |  | +          &-name {
 | 
	
		
			
				|  |  | +            font-size: 28px;
 | 
	
		
			
				|  |  | +            color: #fff;
 | 
	
		
			
				|  |  | +            font-family: SourceHanSansCN;
 | 
	
		
			
				|  |  | +            margin-bottom: 5px;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +          &-link {
 | 
	
		
			
				|  |  | +            font-size: 14px;
 | 
	
		
			
				|  |  | +            color: #fff;
 | 
	
		
			
				|  |  | +            font-family: SourceHanSansCN;
 | 
	
		
			
				|  |  | +            cursor: pointer;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      .edhb-right {
 | 
	
		
			
				|  |  | +        &-item {
 | 
	
		
			
				|  |  | +          color: rgba($color: #fff, $alpha: 0.7);
 | 
	
		
			
				|  |  | +          font-size: 14px;
 | 
	
		
			
				|  |  | +          text-align: right;
 | 
	
		
			
				|  |  | +          margin-bottom: 8px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        .position {
 | 
	
		
			
				|  |  | +          position: relative;
 | 
	
		
			
				|  |  | +          &::before {
 | 
	
		
			
				|  |  | +            content: "";
 | 
	
		
			
				|  |  | +            display: inline-block;
 | 
	
		
			
				|  |  | +            width: 13px;
 | 
	
		
			
				|  |  | +            height: 17px;
 | 
	
		
			
				|  |  | +            background: url("./../../../assets/images/dingwei.svg") no-repeat
 | 
	
		
			
				|  |  | +              center center;
 | 
	
		
			
				|  |  | +            background-size: cover;
 | 
	
		
			
				|  |  | +            vertical-align: bottom;
 | 
	
		
			
				|  |  | +            margin-right: 5px;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  &-main {
 | 
	
		
			
				|  |  | +    &-hot {
 | 
	
		
			
				|  |  | +      margin-bottom: 20px;
 | 
	
		
			
				|  |  | +      .edmh-header {
 | 
	
		
			
				|  |  | +        display: flex;
 | 
	
		
			
				|  |  | +        justify-content: space-between;
 | 
	
		
			
				|  |  | +        align-items: flex-end;
 | 
	
		
			
				|  |  | +        margin-bottom: 18px;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        &-view {
 | 
	
		
			
				|  |  | +          color: #858585;
 | 
	
		
			
				|  |  | +          font-size: 14px;
 | 
	
		
			
				|  |  | +          cursor: pointer;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      h4 {
 | 
	
		
			
				|  |  | +        color: #1a1a1a;
 | 
	
		
			
				|  |  | +        font-size: 20px;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      .edmh-list {
 | 
	
		
			
				|  |  | +        &-item {
 | 
	
		
			
				|  |  | +          background-color: #fff;
 | 
	
		
			
				|  |  | +          padding: 18px 20px;
 | 
	
		
			
				|  |  | +          border-radius: 6px;
 | 
	
		
			
				|  |  | +          display: flex;
 | 
	
		
			
				|  |  | +          justify-content: space-between;
 | 
	
		
			
				|  |  | +          cursor: pointer;
 | 
	
		
			
				|  |  | +          &:hover {
 | 
	
		
			
				|  |  | +            opacity: 0.8;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +          &-left {
 | 
	
		
			
				|  |  | +            .elil-item {
 | 
	
		
			
				|  |  | +              color: #919191;
 | 
	
		
			
				|  |  | +              font-size: 14px;
 | 
	
		
			
				|  |  | +              margin-bottom: 10px;
 | 
	
		
			
				|  |  | +              &:first-child {
 | 
	
		
			
				|  |  | +                color: #1a1a1a;
 | 
	
		
			
				|  |  | +                font-size: 20px;
 | 
	
		
			
				|  |  | +              }
 | 
	
		
			
				|  |  | +              &:last-child {
 | 
	
		
			
				|  |  | +                font-size: 13px;
 | 
	
		
			
				|  |  | +              }
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +          &-right {
 | 
	
		
			
				|  |  | +            text-align: right;
 | 
	
		
			
				|  |  | +            display: flex;
 | 
	
		
			
				|  |  | +            flex-direction: column;
 | 
	
		
			
				|  |  | +            .elir-item {
 | 
	
		
			
				|  |  | +              font-size: 13px;
 | 
	
		
			
				|  |  | +              color: #919191;
 | 
	
		
			
				|  |  | +              &:first-child {
 | 
	
		
			
				|  |  | +                flex: 1;
 | 
	
		
			
				|  |  | +                color: #ee5a0f;
 | 
	
		
			
				|  |  | +                font-size: 18px;
 | 
	
		
			
				|  |  | +              }
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    &-info {
 | 
	
		
			
				|  |  | +      padding-bottom: 100px;
 | 
	
		
			
				|  |  | +      .edmi-introduce {
 | 
	
		
			
				|  |  | +        margin-top: 10px;
 | 
	
		
			
				|  |  | +        margin-bottom: 24px;
 | 
	
		
			
				|  |  | +        h4 {
 | 
	
		
			
				|  |  | +          font-size: 20px;
 | 
	
		
			
				|  |  | +          color: #1a1a1a;
 | 
	
		
			
				|  |  | +          font-family: SourceHanSansCN;
 | 
	
		
			
				|  |  | +          margin-bottom: 10px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        &-content {
 | 
	
		
			
				|  |  | +          line-height: 30px;
 | 
	
		
			
				|  |  | +          font-size: 14px;
 | 
	
		
			
				|  |  | +          color: #6c6c6c;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      .edmi-album {
 | 
	
		
			
				|  |  | +        margin-bottom: 24px;
 | 
	
		
			
				|  |  | +        h4 {
 | 
	
		
			
				|  |  | +          font-size: 20px;
 | 
	
		
			
				|  |  | +          color: #1a1a1a;
 | 
	
		
			
				|  |  | +          font-family: SourceHanSansCN;
 | 
	
		
			
				|  |  | +          margin-bottom: 24px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        &-list {
 | 
	
		
			
				|  |  | +          .image {
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  | +            height: 178px;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      .edmi-position {
 | 
	
		
			
				|  |  | +        h4 {
 | 
	
		
			
				|  |  | +          font-size: 20px;
 | 
	
		
			
				|  |  | +          color: #1a1a1a;
 | 
	
		
			
				|  |  | +          font-family: SourceHanSansCN;
 | 
	
		
			
				|  |  | +          margin-bottom: 20px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        &-list {
 | 
	
		
			
				|  |  | +          &-item {
 | 
	
		
			
				|  |  | +            display: flex;
 | 
	
		
			
				|  |  | +            justify-content: space-between;
 | 
	
		
			
				|  |  | +            padding: 14px 16px;
 | 
	
		
			
				|  |  | +            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 | 
	
		
			
				|  |  | +            margin-bottom: 20px;
 | 
	
		
			
				|  |  | +            cursor: pointer;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        .pagination {
 | 
	
		
			
				|  |  | +          text-align: center;
 | 
	
		
			
				|  |  | +          margin-top: 20px;
 | 
	
		
			
				|  |  | +          :deep(.el-pager .active) {
 | 
	
		
			
				|  |  | +            background-color: #ff3939;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +          :deep(.el-pagination.is-background
 | 
	
		
			
				|  |  | +              .el-pager
 | 
	
		
			
				|  |  | +              li:not(.disabled).active) {
 | 
	
		
			
				|  |  | +            background-color: #ff3939;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |