1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <template>
- <view class="content">
- <navBar>
- <text slot="title">产品手册</text>
- </navBar>
- <view class="tab">
- <view
- :class="['tab-item', isTab(item.id)]"
- v-for="item in tab"
- :key="item.id"
- @click="getTab(item.id)"
- >{{ item.label }}</view
- >
- </view>
- </view>
- </template>
- <script>
- import navBar from "@/components/navbar/navbar";
- export default {
- components: {
- navBar,
- },
- data() {
- return {
- tab: [
- {
- id: 1,
- label: "全部",
- },
- {
- id: 2,
- label: "蓝牙设备",
- },
- {
- id: 3,
- label: "4G/Wi-Fi设备",
- },
- ],
- tabActive: 1,
- };
- },
- methods: {
- isTab(id) {
- return this.tabActive == id
- ? "font-size-lg"
- : "font-size-sm text-color-grey";
- },
- getTab(id) {
- this.tabActive = id;
- },
- },
- };
- </script>
- <style lang="scss" scope>
- .tab {
- display: flex;
- align-items: center;
- .tab-item {
- margin-right: 48rpx;
- }
- }
- </style>
|