deptIntroduction.vue

<template>
    <div class="deptIntroductionMain">
        <div class="title">部门介绍</div>
        <div class="line"></div>
        <div>
        <div class="content">
            <div class="logo">
                <div class="qzh"></div>
                <p>{{ basicObj.name }}</p>
            </div>
            <div class="contentDetail">
                {{ basicObj.introduce }}
            </div>
            <div class="partnerBox">
                <span class="partner" v-for="(arg, index) in labelArr" :key="index">{{ arg }}</span>
                <!-- <span class="partner">华为战略合作伙伴</span> -->
            </div>

        </div>
        <div class="subtitle" style="margin-top: 20px"><i class="diamond"></i>主营业务</div>
        <div class="box">
            <ul>
                <li v-for="(item, id) in businessarr" :key="id">{{ item }}</li>
                <!-- <li>软件与云服务解决方案</li>
                <li>智慧能源</li>
                <li>智慧城市</li>
                <li>新零售</li>
                <li>企业智能化</li> -->
            </ul>
         </div>            
        </div>
    </div>
</template>

<script>
  import * as API_BASIC from '@/api/sys.basic.js'

export default {
    data() {
        return {
            basicData: {},
            basicObj: {},
            hotwordsarr: [],
            labelArr: [],
            businessarr: []
        }
    },
    mounted() {
        this.getBasicList()
    },
    methods: {
        // 查询概况页面数据
        getBasicList() {
            API_BASIC.GetBasicList().then(res => {
                this.basicData = res.data
                this.basicData.org.forEach(element => {
                this.basicObj = element
                this.labelArr = element.label.split('，')
                this.hotwordsarr = element.hotwords.split('，')
                this.businessarr = element.business.split('，')
                });
            })
        },
    }
}
</script>

<style lang="scss" scoped>
    .deptIntroductionMain{
        padding: 0 25px;
        .content{
            overflow: hidden;
            .logo{
                width:20%;
                padding-bottom: 20%;
                height: 0;
                background:rgba(0,14,66,1);
                box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
                border:2px solid rgba(48,221,244,0.5);
                border-radius: 50%;
                float: left;
                .qzh{
                    margin: 10px auto 0;
                    width: 50%;
                    padding-bottom: 50%;
                    height: 0;
                    background:url("~@/assets/img/Wisenergy.png");
                    background-size: 100% 100%;
                }
                p{
                    text-align: center;
                    width: 100%;
                    height:20px;
                    font-size:16px;
                    font-family:PingFang-SC-Bold,PingFang-SC;
                    font-weight:bold;
                    color:rgba(255,255,255,1);
                    line-height:20px;
                    margin: 0;
                }
            }
            .contentDetail{
                width:calc(80% - 20px);
                margin: 6px 0 6px 8px;
                height:32%;
                font-size:12px;
                font-family:PingFang-SC-Regular,PingFang-SC;
                font-weight:400;
                color:rgba(255,255,255,1);
                line-height:16px;
                float: left;
                overflow-y: auto;
            }
            .partnerBox{
                margin-left: calc(20% + 8px);
                .partner{
                    width:130px;
                    height:45px;
                    font-size:12px;
                    font-family:PingFang-SC-Bold,PingFang-SC;
                    font-weight:bold;
                    color:$color-primary;
                    line-height:28px;
                    margin-right: 10px;
                    float: left;
                }
            }
        }
        .box{
            width:100%;
            overflow-x:auto;
            ul{
                li{
                    padding: 6px 4px;
                    font-size:12px;
                    font-family:PingFang-SC-Bold,PingFang-SC;
                    font-weight:bold;
                    color:rgba(255,255,255,1);
                    line-height:12px;
                    background:linear-gradient(180deg,rgba(94,240,250,0.2) 0%,rgba(48,221,244,0.2) 100%);
                    border-radius:2px;
                    border:1px solid;
                    border-image:linear-gradient(180deg, rgba(94,240,250,1), rgba(48,221,244,1)) 1 1;
                    float: left;
                    margin-right: 10px;
                    margin-bottom: 6px;
                }
            }
        }

    }
</style>