|
|
@@ -0,0 +1,56 @@
|
|
|
+<template>
|
|
|
+ <div class="page">
|
|
|
+ <div class="tab-bar">
|
|
|
+ <div class="tabs">
|
|
|
+ <van-tabs class="darkTabs" v-model:active="type" line-width="16" line-height="2" :ellipsis="false">
|
|
|
+ <van-tab :title="item.label" :name="item.value" :key="index" v-for="(item, index) in typeOptions">
|
|
|
+ <template v-if="item.type === 'select'" #title>
|
|
|
+ <div class="tab">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <van-icon size="8" name="arrow-up" />
|
|
|
+ <van-icon size="8" name="arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ type: '',
|
|
|
+ typeOptions: [
|
|
|
+ {
|
|
|
+ label: '百家姓',
|
|
|
+ value: '',
|
|
|
+ type: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '字符',
|
|
|
+ value: 'xingtu',
|
|
|
+ type: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '数字',
|
|
|
+ value: 'metadomainName',
|
|
|
+ type: ''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.page {
|
|
|
+ background-color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.darkTabs {
|
|
|
+ background-color: #161414;
|
|
|
+}
|
|
|
+</style>
|