Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
You need to sign in or sign up before continuing.
hookehuyr
57fedb8e 1 parent f7ab5205

✨ feat: 新增活动详情页面

Inline Side-by-side
Showing 7 changed files with 201 additions and 3 deletions
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-27 15:57:59
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-21 16:04:58
* @LastEditTime: 2022-09-26 14:37:22
* @FilePath: /swx/src/app.config.js
* @Description:
*/
......@@ -23,6 +23,7 @@ export default {
'pages/foo/index',
'pages/my/index',
'pages/createActivity/index',
'pages/activityDetail/index',
],
subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
{
......
<!--
* @Date: 2022-09-20 15:39:37
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-21 15:25:19
* @LastEditTime: 2022-09-26 14:40:18
* @FilePath: /swx/src/components/activity-card.vue
* @Description: 活动卡片组件
-->
......@@ -42,7 +42,7 @@
</view>
</van-col>
<van-col :span="5">
<view class="status-button">
<view @tap="goTo()" class="status-button">
<text>我要报名</text>
</view>
</van-col>
......@@ -56,9 +56,17 @@ import { ref, defineProps } from 'vue'
import icon_time from '@/images/icon/time@2x.png'
import icon_address from '@/images/icon/address@2x.png'
import Taro from '@tarojs/taro'
const props = defineProps({
data: Object
})
const goTo = () => {
Taro.navigateTo({
url: '../activityDetail/index'
})
}
</script>
<style lang="less">
......
/*
* @Date: 2022-09-26 14:36:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-26 14:41:01
* @FilePath: /swx/src/pages/activityDetail/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '活动详情',
usingComponents: {
},
}
.bg-gradient {
background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
/*调整下划线的宽度占百分之百 高度是3px */
background-size: 100% 1vw;
/* 调整下划线的起始位置 左侧是0 上边是1.15em */
background-position: 0 1.25rem;
}
.divide-line {
height: 0.5rem;
background-color: #F6F6F6;
}
.activity-title {
background-color: #FFFFFF;
.box {
padding: 1rem 1rem 0.5rem 1rem;
text-align: center;
}
}
.activity-info-wrapper {
.box {
padding: 0 1rem;
.border {
border-bottom: 1px solid #F2F2F2;
overflow: auto;
padding-top: 1rem;
padding-bottom: 1rem;
.label {
color: #999999;
}
.value {
color: #222222;
}
}
}
}
<!--
* @Date: 2022-09-26 14:36:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-26 16:08:19
* @FilePath: /swx/src/pages/activityDetail/index.vue
* @Description: 文件描述
-->
<template>
<view style="background-color: #FFFFFF;">
<view style="position: relative;">
<van-image
width="100%"
height="15rem"
fit="cover"
:src="img_demo"
/>
<view style="position: absolute; top: 1rem; right: 0; background-color: #199A74; border-top-left-radius: 1rem;border-bottom-left-radius: 1rem; padding: 0.5rem; color: #FFFFFF;">
<van-icon name="share-o" />
<text>分享</text>
</view>
</view>
<view style="border-bottom: 1px solid #F6F6F6; padding: 1rem; font-size: 1.15rem;">八段锦</view>
<view class="activity-title">
<view class="box">
<text class="bg-gradient" style="font-size: 1.25rem;">活动信息</text>
</view>
</view>
<view class="activity-info-wrapper">
<view class="box">
<view class="border">
<van-row>
<van-col span="7">
<text class="label">主办方:</text>
</van-col>
<van-col span="17">
<text class="value">周三读书会</text>
</van-col>
</van-row>
</view>
</view>
<view class="box">
<view class="border">
<van-row>
<van-col span="7">
<text class="label">活动时间:</text>
</van-col>
<van-col span="17">
<text class="value">2023-08-27 23:49</text>
</van-col>
</van-row>
</view>
</view>
<view class="box">
<view class="border">
<van-row>
<van-col span="7">
<text class="label">活动方式:</text>
</van-col>
<van-col span="17">
<text class="value">现场活动</text>
</van-col>
</van-row>
</view>
</view>
<view class="box">
<view class="border">
<van-row>
<van-col span="7">
<text class="label">活动地址:</text>
</van-col>
<van-col span="17">
<text class="value">上海市杨浦区军工路100号A座05室上海市杨浦区军工路100号A座05室</text>
</van-col>
</van-row>
</view>
</view>
<view class="box">
<view class="border">
<van-row>
<van-col span="7">
<text class="label">报名开始时间:</text>
</van-col>
<van-col span="17">
<text class="value">2022-08-28 00:22</text>
</van-col>
</van-row>
</view>
</view>
<view class="box">
<view class="border">
<van-row>
<van-col span="7">
<text class="label">报名截止时间:</text>
</van-col>
<van-col span="17">
<text class="value">2022-08-28 00:22</text>
</van-col>
</van-row>
</view>
</view>
</view>
<view class="divide-line"></view>
<view class="activity-title">
<view class="box">
<text class="bg-gradient" style="font-size: 1.25rem;">活动详情</text>
</view>
</view>
<view style="padding: 0.5rem 1rem 1rem 1rem;">
<van-image
width="100%"
height="32rem"
fit="contain"
:src="img_demo1"
/>
</view>
<view style="padding: 0.5rem 1rem 1rem 1rem;">
八段锦对人体的好处,简单来说就是滋阴助阳,培补元气,舒经活络,活血生津。长期习练,便可身心调和，耳聪目明,延年益寿。
每天早七点，一起八段锦！
</view>
</view>
<view>
</view>
</template>
<script setup>
import img_demo from '@/images/demo@2x.png'
import img_demo1 from '@/images/demo@2x-1.png'
import { ref } from "vue";
const str = ref('demo')
</script>
<script>
import "./index.less";
export default {
name: "demoPage",
};
</script>