tsg-app/pages/skInfo/detail/tzcs.vue

<template>
    <view class="basic-box">
        <view class="basic-data-select">
            <uni-data-select v-model="selectValue" :localdata="range" @change="selectChage" :clear="false"></uni-data-select>
        </view>
        <view class="project-des">
            <view v-for="(item,index) in tableData" :key="index"
               :style="index % 2 == 0 ? 'width:50%;':'width:50%;'">
                <view style="display:flex;align-items:center;margin:15px 0px;">
                    <view class="circle-dot"></view>
                    <view class="label-name">
                        <text style="opacity:0.5;text-align: center;">{{item.name}}</text>
                        <text>{{item.value||"-"}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
  import selectData from "../../staticData"
    export default {
        props: {
            skInfo: {
                type: Object,
                default: {}
            }

        },
        data() {
            return {
                list: selectData[0],
                range: [{
                        value: 0,
                        text: "水库"
                    },
                    {
                        value: 1,
                        text: "主坝"
                    },
                    {
                        value: 2,
                        text: "副坝"
                    },
                    {
                        value: 3,
                        text: "溢洪道"
                    },
                    {
                        value: 4,
                        text: "灌溉发电洞"
                    },
                    {
                        value: 5,
                        text: "放空洞"
                    },
                    {
                        value: 6,
                        text: "拦洪坝"
                    },
                    {
                        value: 7,
                        text: "防汛道路"
                    }
                ],
                selectValue: 0
            }
        },
        methods: {
            selectChage(e) {
                this.selectChage = e
                this.list = selectData[e]
            }
        },
        computed: {
            tableData() {
                return this.list.map(item => {
                    return {
                        name: item.name,
                        value: this.skInfo[item.key]
                    }
                })
            }
        },
     
    }
</script>
<style lang="scss">
    .basic-box {
        display: flex;
        flex-direction: column;

    }

    .basic-data-select {
        width: 40%;
        margin-top: 10px;
        margin-left: auto;
        margin-bottom: 10px;
        margin-right: 10px;
    }

    .project-des {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #f2f2f2;
        background-color: #ffffff;
        padding: 0 10px;
        max-height: calc(100vh - 190px);
        overflow: auto;

        .circle-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #409eff;
            margin-left: 10px;
        }

        .label-name {
            display: flex;
            flex-direction: column;
            align-items: center;

            flex: 1
        }
    }
</style>