Feat： 寻趣味改版（新增古镇模块）

pages/town/components/projects.vue

@@ -0,0 +1,186 @@
+<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 v12-justify-center"
+      :class="{
+        'first-one': actived === 1,
+        'last-one': actived === 3
+       }"
+      
+    >
+      <view class="v12-d-grid-columns-2 v12-gap-10">
+        <view v-for="(item, index) in items" :key="index" class="store-card">
+          <view>
+            <image class="town-cover" :src="item.cover" mode="aspectFit|aspectFill|widthFix"></image>
+          </view>
+          <view class="v12-pa-2">
+            <view class="v12-dark-text v12-font-bold v12-font-30 v12-py-1 more-t">昆明小吃</view>
+            <view class="v12-align-center">
+              <view class="avtor">
+                <image class="avtor"></image>
+              </view>
+              <view class="v12-secondary-dark-text v12-font-28 v12-ml-3 one-t">刘欢小吃</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      default:() => {}
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      actived: 1,
+      items: [],
+      itemsMap: {
+        1: 'project1Hotels',
+        2: 'project2Hotels',
+        3: 'project3Hotels'
+      }
+    }
+  },
+  watch: {
+    info(value) {
+      this.items = value && value[this.itemsMap[this.actived]]
+    },
+    actived: {
+      handler(value) {
+        this.items = this.info && this.info[this.itemsMap[value]]
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    tabs() {
+      return this.info && [
+        {name: this.info.project1Name, value: 1},
+        {name: this.info.project2Name, value: 2},
+        {name: this.info.project3Name, value: 3},
+      ] || []
+    }
+  },
+  methods: {
+    handleTab(value) {
+      this.actived = value
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.avtor{
+  width: 52rpx;
+  height: 52rpx;
+  background: #eee;
+  border-radius: 50%;
+}
+.town-cover{
+  height: 316rpx;
+  width: 316rpx;
+  border-radius: 30rpx;
+  background: rgba(77,39,39,0.1);
+}
+.store-card{
+  width: 316rpx;
+  border-radius: 30rpx;
+}
+.tab-icon{
+  height: 30rpx;
+  width: 30rpx;
+  margin-right: 10rpx;
+}
+.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;
+    display: flex;
+    justify-content: center;
+    align-items: center
+  }
+}
+.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>