LiaoningChanpinHuaxiang/src/views/bigpage/bigcomponents/Basicbox.vue

<template>
    <div class="Basic-box">
        <div class="Basic-box-item" v-for="(item, index) in BasicList" :key="index">
            <div>{{ item.name }}</div>
            <div class="item-value">{{ item.value }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Basicbox',
    components: {},
    data() {
        return {
            BasicList: [],
            ypList: [
                { name: "药品通用名称:", value: "复方枸杞子胶囊" },
                { name: "药品分类:", value: "中药" },
                { name: "剂型:", value: "胶囊剂" },
                { name: "规格:", value: "每粒0.5克" },
                { name: "批准文号:", value: "国标批准文号B25818818" },
                { name: "批准文号期限:", value: "2023-06-08" },
                { name: "上市许可证持有人:", value: "沈阳xx药业股份有限公司" },
                { name: "生产企业:", value: "复方枸杞子胶囊" },
                { name: "执行标准:", value: "复方枸杞子胶囊" },
            ],
            ylqxList: [
                { name: "产品名称:", value: "复方枸杞子胶囊" },
                { name: "产品类型:", value: "中药" },
                { name: "管理类别:", value: "胶囊剂" },
                { name: "型号规格:", value: "每粒0.5克" },
                { name: "备案编号:", value: "国标批准文号B25818818" },
                { name: "备案人名称:", value: "2023-06-08" },
                { name: "产品有效期:", value: "沈阳xx药业股份有限公司" },
                { name: "结构特征:", value: "复方枸杞子胶囊" },
                { name: "境内进口:", value: "复方枸杞子胶囊" },
                { name: "生产地址:", value: "复方枸杞子胶囊" },
                { name: "生产标准:", value: "复方枸杞子胶囊" },
            ],
            hzpList: [
                { name: "产品名称:", value: "复方枸杞子胶囊" },
                { name: "产品类型:", value: "中药" },
                { name: "型号规格:", value: "胶囊剂" },
                { name: "备案编号:", value: "每粒0.5克" },
                { name: "备案人名称:", value: "国标批准文号B25818818" },
                { name: "产品有效期:", value: "2023-06-08" },
                { name: "境内进口:", value: "沈阳xx药业股份有限公司" },
                { name: "生产地址:", value: "复方枸杞子胶囊" },
                { name: "生产标准:", value: "复方枸杞子胶囊" },
            ]
        }
    },
    created() { },
    mounted() {
        
    },
    methods: {},
    computed: {}
}
</script>
<style scoped lang='scss'>
.Basic-box {
    width: 100%;
    height: 300px;
    padding: 0 11px 11px 11px;
    overflow-y: auto;

    .Basic-box-item {
        position: relative;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px 0 40px;
        background: url('../../../assets/images/daping/basic.png');
        background-size: cover;
        background-repeat: no-repeat;

        &::before {
            content: "";
            position: absolute;
            top: 1px;
            left: 0px;
            /* 将伪元素定位到元素的边框上方 */
            height: 1px;
            width: 100%;
            /* 将伪元素定位到元素的边框上方 */
            border: 1px solid rgba(0, 0, 0, 0.2);
        }

        div:nth-of-type(1) {
            // flex: 1;
            /* 第二个子元素的样式 */
            font-size: 16px;
            font-family: Medium;
            font-weight: 400;
            color: #7CA8F4;
            margin-right: 10px;
        }

        div:nth-of-type(2) {
            /* 第二个子元素的样式 */
            flex: 1;
            text-align: right;
            font-size: 14px;
            font-family: Regular;
            font-weight: 400;
            color: #B7D4F5;
            white-space: nowrap;
            /* 不换行 */
            overflow: hidden;
            /* 溢出隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */

        }
    }
}
</style>