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

<script>
export default {
    name: 'Basicbox',
    components: {},
    data() {
        return {
            BasicList: [
                { 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;
        }

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

        }
    }
}
</style>
