feat: 增加一些组件

zhangnuoyan

2024-08-25 77e5c96577bfe426e4a341361e5c196dd5c5b7c9

 src/views/oneThree/member/index.vue

@@ -46,48 +46,28 @@
            </div>
        </div>
        <div class="right">
            <the-a-tabs style="margin: 8px 0" :data="['基本信息', '人员轨迹', '出行信息', '资源信息']" :index="0" />
            <the-a-tabs
                style="margin: 8px 0"
                :data="['基本信息', '人员轨迹', '出行信息', '资源信息']"
                :index="index"
                @handleChange="handleChange"
            />
            <section>
                <div class="menus">
                    <div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
                    <div><a-time-picker type="time-range" style="width: 250px" /></div>
                    <div>
                        <the-a-select :data="['正序', '倒序']" placeholder="请选择" title="排序"></the-a-select>
                    </div>
                    <div>
                        <the-a-select :data="['1号楼', '2号楼']" placeholder="请选择" title="出现地点"></the-a-select>
                    </div>
                    <div>
                        <a-button type="primary">
                            <template #icon>
                                <icon-search />
                            </template>
                            <template #default>搜索</template>
                        </a-button>
                    </div>
                    <div>
                        <a-button>
                            <template #icon>
                                <icon-refresh />
                            </template>
                            <template #default>重置</template>
                        </a-button>
                    </div>
                    <div class="buttons">
                        <div>
                            <icon-list size="20" />
                        </div>
                        <div class="button active">
                            <icon-apps size="20" />
                        </div>
                    </div>
                </div>
                <member-basic v-if="index === 0" />
                <member-track v-if="index === 1" />
                <member-travel v-if="index === 2" />
                <member-source v-if="index === 3" />
            </section>
        </div>
    </div>
</template>

<script lang="ts" setup name="member">
import memberBasic from "./pages/basic.vue";
import memberSource from "./pages/source.vue";
import memberTrack from "./pages/track.vue";
import memberTravel from "./pages/travel.vue";
const index = ref(0);
const changeData = reactive([
    {
        name: "1天",
@@ -103,16 +83,7 @@
    }
]);
const data = reactive({
    desc: [
        "所属小区：北京",
        "所属派出所：来广营派出所",
        "首次抓拍时间：2023-12-12 12:23",
        "首次抓拍地点：二号楼",
        "抓拍次数：23",
        "出现天数：12",
        "最后出现时间：2024-01-12 12:23",
        "常住地址：A小区1栋2单元201"
    ],
    desc: ["所属小区：北京", "所属派出所：来广营派出所", "首次抓拍时间：2023-12-12 12:23"],
    tags: [
        {
            title: "人员标签",
@@ -142,6 +113,9 @@
        }
    ]
});
const handleChange = (value: number) => {
    index.value = value;
};
</script>

<style lang="scss" scoped>
@@ -230,7 +204,7 @@
            }
        }
        .icons {
            margin: 75px 0;
            margin: 25px 0 50px;
            display: flex;
            > div {
                margin-right: 10px;
@@ -246,29 +220,6 @@
            background: var(--color-bg-2);
            padding-top: 20px;
            margin-top: 10px;
            .menus {
                display: flex;
                padding: 0 5px 20px 20px;
                > div {
                    margin-right: 10px;
                    &.buttons {
                        display: flex;
                        background: var(--color-fill-2);
                        > div {
                            width: 34px;
                            height: 34px;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            &.active {
                                background: #1057fd;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}