Feat: 地标好物（页面&接口）

(cherry picked from commit c18ec66653)
2024-11-15 10:40:13 +08:00
parent 6983ebeb21
commit b5c87c1edb
9 changed files with 961 additions and 129 deletions
@@ -0,0 +1,130 @@
+<template>
+  <view class="projects">
+    <view class="tabs-wrap">
+      <view 
+        @click="handleTab(item.value)" 
+        class="tab-item" 
+        :class="{
+          'tab-isActived': actived === item.value
+        }" 
+        v-for="(item, index) in tabs" 
+        :key="index">
+        <view 
+          :class="{
+            'tab-isActived': actived === item.value,
+            'no-actived-1': actived === 2 && item.value === 1,
+            'no-actived-2': actived === 1 && item.value === 2,
+            'no-actived-3': actived === 3 && item.value === 2,
+            'no-actived-4': actived === 2 && item.value === 3,
+          }"
+        >{{ item.name }}</view>
+      </view>
+    </view>
+    <view 
+      class="content"
+      :class="{
+        'first-one': actived === 1,
+        'last-one': actived === 3
+       }"
+      
+    >
+      <recommend v-if="actived === 1" :landmarkDataId="landmarkDataId"></recommend>
+      <policy v-if="actived === 2" :landmarkDataId="landmarkDataId"></policy>
+      <serviec v-if="actived === 3" :landmarkDataId="landmarkDataId"></serviec>
+    </view>
+  </view>
+</template>
+
+<script>
+import recommend from './recommend.vue'
+import policy from './policy.vue'
+import serviec from './serviec.vue'
+export default {
+  components: {
+    recommend,
+    policy,
+    serviec
+  },
+  props: {
+    landmarkDataId: null
+  },
+  data() {
+    return {
+      actived: 1,
+      tabs: [
+        {name: '企业推荐', value: 1},
+        {name: '政策', value: 2},
+        {name: '服务', value: 3},
+      ]
+    }
+  },
+  methods: {
+    handleTab(value) {
+      this.actived = value
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fit-box-inner{
+  background: #f0f0f0;
+  width: initial;
+  height: inherit;
+  width: 40rpx;
+}
+.first-one{
+  border-radius: 0 24rpx 24rpx 24rpx !important;
+}
+.last-one{
+  border-radius: 24rpx 0  24rpx 24rpx !important;
+}
+.fit-box{
+  width: 40rpx;
+  height: initial;
+  background: #fff;
+  display: flex;
+}
+.projects{
+  padding: 20rpx;
+}
+.tabs-wrap{
+  display: flex;
+  justify-content: space-between;
+}
+.tab-item{
+  text-align: center;
+  flex: 1;
+  font-size: 32rpx;
+  font-weight: bold;
+  background: #fff;
+  view{
+    padding: 20rpx 0;
+    background: #f0f0f0;
+    width: inherit;
+    height: inherit;
+  }
+}
+.no-actived-1{
+  border-radius: 0 0 24rpx 0 !important;
+}
+.no-actived-2{
+  border-radius: 0 0  0 24rpx !important;
+}
+.no-actived-3{
+  border-radius: 0 0 24rpx 0 !important;
+}
+.no-actived-4{
+  border-radius: 0 0  0 24rpx !important;
+}
+.tab-isActived{
+  background: #fff !important;
+  border-radius: 24rpx 24rpx 0 0 !important;
+  position: relative;
+}
+.content{
+  background: #fff;
+  padding: 20rpx 10rpx;
+  border-radius: 24rpx;
+}
+</style>