Feat：康养页面

2024-10-08 00:25:03 +08:00
parent c51f177c7c
commit 566ef9de61
8 changed files with 901 additions and 19 deletions
@@ -0,0 +1,119 @@
+<template>
+  <view class="expo-details">
+    <view class="video-wrap">
+		  <video id="ky-video" class="ky-video"  @error="videoErrorCallback" :show-fullscreen-btn="false" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"  autoplay controls></video>
+    </view>
+    <view class="expo-item">
+      中国昆明第九届国际大健康暨养生养老产业博览会
+    </view>
+    <view class="details-wrap v12-mt-3">
+      <view class="v12-font-bold v12-dark-text v12-font-32 v12-mb-3">展会信息</view>
+      <view class="v12-justify-start v12-mb-3">
+        <view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">主题</view>
+        <view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">中国昆明第九届国际大健康暨养生养老产业博览会</view>
+      </view>
+      <view class="v12-justify-start v12-mb-3">
+        <view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">内容</view>
+        <view class="v12-font-24 v12-dark-text v12-ml-3">“中国(昆明)国际大健康养生养老产业博览会”创办于2017
+          年，由云南省民政厅、云南省老龄办、云南省贸促会共同发
+          起指导，早云南省商务厅、云南省投促局以及昆明市政府相
+          关部门支持下，至今已连续成功举办了八届，在国内同类型
+          展会中已具一定规模和影响力，被昆明市有关部门综合评估
+          为5A级博览会。
+        </view>
+      </view>
+      <view class="v12-justify-start v12-mb-3">
+        <view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">时间</view>
+        <view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">2024年11月22日--2024年11月24日</view>
+      </view>
+      <view class="v12-justify-start v12-mb-3">
+        <view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">地点</view>
+        <view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">滇池国际会展中心</view>
+      </view>
+    </view>
+    <view class="more-wrap v12-mt-3">
+      <view class="v12-justify-between v12-align-center v12-mb-3">
+        <view class="v12-font-bold v12-font-32">其他展会</view>
+        <view class="v12-font-24" @click="toMore">查看更多</view>
+      </view>
+      <view 
+        v-for="(item, index) in moreList" 
+        :key="index" 
+        @click="getOther(item.id)"
+        class="v12-white v12-dark-text v12-font-bold v12-font-26 v12-mb-3 v12-radius-50 v12-pa-2">
+        {{ item.label }}
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default{
+  data() {
+    return {
+      keyword: '',
+      moreList: [
+        {id: 1, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 2, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 3, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 4, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 5, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+      ],
+      id: '',
+      details: {}
+    }
+  },
+  onLoad(opts) {
+    this.id = opts.id || ''
+    this.getDetails(this.id)
+  },
+  methods: {
+    videoErrorCallback(error) {
+      console.log(error);
+      
+    },
+    getDetails(id) {
+
+    },
+    getOther(id) {
+      this.id = id
+      this.getDetails(this.id)
+    },
+    toMore() {
+      uni.navigateTo({
+        url: '/pkg_product/views/expoList'
+      })
+    },
+
+  }
+}
+</script>
+<style lang="less" scoped>
+.ky-video{
+  height: 400rpx;
+  width: 100%;
+  border-radius: 20rpx;
+}
+.tag{
+  height: 30rpx;
+}
+.expo-details{
+  height: 100vh;
+  background: #fff;
+  padding: 20rpx;
+}
+.expo-item{
+  background-color: #f2f2f2;
+  border-radius: 100rpx;
+  font-size: 26rpx;
+  font-weight: bold;
+  margin-top: 20rpx;
+  padding: 20rpx;
+}
+.details-wrap, .more-wrap{
+  width: 100%;
+  background: #f2f2f2;
+  border-radius: 20rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+</style>