<!-- 功能：功能描述; 作者：LZJ; 时间：2022年10月18日 11:38:22-->
<template>
    <div id="HomePage" class="pt55 ta-c flex-column-center-start">
        <h1 class="ft40 title-h1">欢迎来到后台管理系统</h1>
        <div class="flex">
            <span class="ptb20 ft20 fw500 mlr20"><a href="https://kdocs.cn/l/ch3GQdixOGkw" target="blank">web框架说明手册</a></span>
            <span class="ptb20 ft20 fw500 mlr20"><a href="https://docs.qq.com/flowchart/DZVZ2T1R0aFp2RVlK" target="blank">web框架架构图</a></span>
        </div>
        <p>本系统基于UI库element封装集成，官网链接<a href="https://element.eleme.cn/#/zh-CN/component/installation" class="ft20 mlr10 fw-500" target="blank">Element官网</a></p>
        <div class="flex-column-center">
            <div class="marketing">
                <div class="box flex">
                    <div v-for="(item, index) in dataArr" :key="index" class="item-box pd20 mlr20 flex-column-center-start">
                        <strong class="ft18 title mb10">{{ item.title }}</strong>
                        <a v-if="item.link" :href="item.link" target="blank">{{ item.content }}</a>
                        <p v-else>{{ item.content }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    // 组件名称
    name: 'HomePage',
    // 局部注册的组件
    components: { },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            dataArr: [
                { title: '培训视频', content: '腾讯会议录制视频', link: 'https://meeting.tencent.com/v2/cloud-record/share?id=861d0cc7-7a04-4bac-b4c6-38d6c450db25&from=3' },
                { title: '组件标准', content: '常用，3次以上，UI库无法直接使用，需要封装支持的' },
                { title: '需求标准', content: '复杂交互样式，特殊功能需求，申请前端人力支援' },
                { title: '申请流程', content: '满足标准发邮件，需要提前至少一周提出，前端给出计划时间' },
                { title: '发送邮件', content: '刘颖liuying06@fhrons.com' },
                { title: '抄送邮件', content: '刘洋君liuyj07@fanhuaholdings.com' }
            ]
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {}
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>
#HomePage {
    .title-h1 {
        margin-top: 80px;
    }
    .item-box {
        width: 160px;
        height: 160px;
        border: 3px solid var(--middleThemeColor);
        background: var(--litterThemeColor);
        border-radius: 50%;
    }
    .title {
        margin-top: 30px;
    }

    .marketing {
        margin-top: 80px;
    }
}
</style>
