
<template>
    <div class="pc-container">
        <div class="system-header">
            <div class="left-tags">
                2023年8月11日 星期五 16:23:34
            </div>
            <div class="system-title" text="产品画像">
                产品画像
            </div>
            <div class="rigth-tags">

                <div class="rigth-tags-diva"> <span class="rigth-tags-spana"><i class="el-icon-sunny"></i></span>晴天 17~28°C
                    <span class="rigth-tags-spanb"> | </span>东南风3级
                </div>
            </div>
        </div>
        <div class="system-bottom">
            <div class="bg-left"></div>
            <div class="bg-right"></div>
            <div class="bg-bottom"></div>

            <div class="system-box">
                <!-- 左边 -->
                <div class="system-box-left">
                    <div class="system-boxleft-top top">
                        <headtitle mytitle="基本信息"></headtitle>
                        <!-- 组件 -->
                        <Basicbox></Basicbox>
                    </div>
                    <div class="system-boxleft-bottom bottom">
                        <headtitle mytitle="变更信息"></headtitle>
                        <ChangeinformationList></ChangeinformationList>
                    </div>
                </div>
                <!-- 中间 -->
                <div class="system-box-content">
                    <div class="top">
                        <!-- 头部 -->
                        <div class="fengxian-top">
                            <div class="fengxian-top-left">复方枸杞子胶囊</div>
                            <div class="fengxian-top-right">
                                <span>保健药</span>
                                <span>保健药</span>
                                <span>保健药</span>
                                <span>保健药</span>
                            </div>
                        </div>
                        <headtitle mytitle="风险提示信息"></headtitle>
                        <riskinformationList></riskinformationList>

                    </div>
                    <div class="bottom">
                        <headtitle mytitle="检验检测信息"></headtitle>
                        <informationBox></informationBox>
                    </div>
                </div>
                <!-- 右边 -->
                <div class="system-box-right">
                    <div class="top">
                        <headtitle mytitle="召回信息"></headtitle>
                        <recallbox></recallbox>

                    </div>
                    <div class="bottom">
                        <headtitle mytitle="不良反应信息"></headtitle>
                        <AdverseBox></AdverseBox>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
// 头部
import headtitle from './bigcomponents/headtitle.vue';
// 基本信息
import Basicbox from './bigcomponents/Basicbox.vue';
// 变更信息
import ChangeinformationList from './bigcomponents/ChangeinformationList.vue';
// 风险提示信息
import riskinformationList from './bigcomponents/riskinformationList.vue';
// 检验检测信息
import informationBox from './bigcomponents/informationBox.vue';
// 召回信息
import recallbox from './bigcomponents/recallbox.vue';
// 不良反应
import AdverseBox from './bigcomponents/AdverseBox.vue';
export default {
    name: '',
    components: { headtitle, Basicbox, ChangeinformationList,riskinformationList,informationBox,recallbox,AdverseBox },
    data() {
        return {

        }
    },
    created() { },
    mounted() { },
    methods: {},
    computed: {}
}
</script>
<style scoped lang='scss'>
@import '@/assets/styles/theme.scss';

div {
    text-align: left;
}

.pc-container {
    overflow: hidden;
    height: 100%;
    background: url('../../assets/images/daping/main-background.png') no-repeat center;
    background-size: cover;
    position: relative;

    // 头部
    .system-header {
        // position: absolute;
        // top: 0;
        // left: 0;
        height: 12vh;
        width: 100%;
        background-image: url('../../assets/images/daping/img_title@2x.png');
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;

        &>div {
            flex: 1;
            height: 100%;
        }

        .system-title {
            padding: 0 0 10px 0;
            font-size: 50px;
            font-family: 'YouSheBiaoTiHei';
            font-weight: 400;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            text-shadow: 0px 2px 4px #03101c;
            letter-spacing: 5px;

            &::before {
                content: attr(text);
                position: absolute;
                z-index: 10;
                color: #ffffff;
                // 渐变样式
                background: linear-gradient(0deg, #5abdf7 20%, #ecf8fe 80%);
                -webkit-background-clip: text;
                color: transparent;
                // 去除继承父级样式
                text-shadow: none;
            }
        }

        .rigth-tags {
            display: flex;
            align-items: flex-end;
            flex-direction: row-reverse;
            box-sizing: border-box;
            color: #86A3C3;
            padding: 0 20px 20px 0;

            .rigth-tags-spana {
                margin-right: 10px;

                i {
                    color: yellow;
                }
            }

            .rigth-tags-spanb {
                width: 2px;
                height: 16px;
                padding: 0 5px;
                color: #2D8EF2;
            }

        }

        .left-tags {
            display: flex;
            align-items: flex-end;
            box-sizing: border-box;
            color: #ffffff;
            font-weight: 400;
            padding: 0 0 20px 20px;
            color: #86A3C3;
        }
    }

    // 底部
    .system-bottom {
        height: 87vh;
        padding: 24px;
        position: relative;

        .bg-left,
        .bg-right,
        .bg-bottom {
            position: absolute;
            /* 将背景图定位为绝对定位 */
            z-index: 0;
            /* 将背景图放在容器最下方 */
            background-repeat: no-repeat;
            /* 禁止重复显示背景图 */
            background-size: contain;
        }

        .bg-left {
            top: 0;
            bottom: 12px;
            left: 5px;
            right: 0;
            background-image: url("../../assets/images/daping/left-line@2x.png");
            background-position: left top;
            /* 将背景图左上角对齐容器左上角 */
            /* 按比例缩放背景图，尽可能填充容器 */
        }

        .bg-right {
            top: 0;
            bottom: 12px;
            left: 0;
            right: 5px;
            background-image: url("../../assets/images/daping/right-line@2x.png");
            background-position: right top;
            /* 将背景图右上角对齐容器右上角 */
            /* 按比例缩放背景图，尽可能填充容器 */
        }

        .bg-bottom {
            top: 0;
            bottom: 0px;
            left: 5px;
            right: 5px;
            background-image: url("../../assets/images/daping/bottom-line.png");
            background-position: center bottom;
            /* 将背景图中心点对齐容器底部中心 */
            /* 按比例缩放背景图，保持其宽高比，同时确保不会溢出容器 */
        }

        .system-box {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;

            &>div {
                height: 100%;
                display: flex;
                flex-direction: column;
                /* 设置垂直方向排列 */
                justify-content: space-between;

                .top {
                    flex: 1;
                    margin-bottom: 15px;
                }

                .bottom {
                    flex: 1;
                }
            }

            .system-box-left {
                flex: 1;
                width: 25vw;

                .system-boxleft-top,
                .system-boxleft-bottom {
                    background: url('../../assets/images/daping/boxBG.png');
                    background-size: cover;
                    background-repeat: no-repeat;

                }

                /* 将项目从下往上排列 */
                .system-boxleft-top {}

                .system-boxleft-bottom {}
            }

            .system-box-content {
                width: 48vw;
                margin: 0 15px;
                flex: 2;
            }

            .system-box-right {
                width: 25vw;

                flex: 1;
            }
        }

        .fengxian-top {
            padding: 0 30px;
            height: 80px;
            background: rgba(0, 168, 255, 0.04);
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: inset 0px 0px 35px rgba(4, 72, 161, 1);
            display: flex;
            justify-content: space-between;
            align-items: center;

            .fengxian-top-left {
                font-size: 32px;
                font-family: Regular;
                font-weight: bold;
                color: #61B5F5;
                line-height: 42px;
            }

            .fengxian-top-right {
                display: flex;
                span {
                    margin: 0 3px;
                    width: 93px;
                    height: 49px;
                    background: url('../../assets/images/daping/fengxianbgc.png') no-repeat center;
                    background-size: contain;
                    text-align: center;
                    line-height: 49px;
                    color: #4DA5FF;
                    font-weight: 400;
                }
            }
        }
    }
}</style> 
   