Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
02ac33c3 1 parent 82f42daf

✨ feat: 活动卡片组件功能完善

Inline Side-by-side
Showing 7 changed files with 102 additions and 21 deletions
...@@ -59,6 +59,8 @@ const config = { ...@@ -59,6 +59,8 @@ const config = {
59 "@/utils": path.resolve(__dirname, "../src/utils"), 59 "@/utils": path.resolve(__dirname, "../src/utils"),
60 "@/vant": path.resolve(__dirname, "../src/components/vant-weapp"), 60 "@/vant": path.resolve(__dirname, "../src/components/vant-weapp"),
61 "@/components": path.resolve(__dirname, "../src/components"), 61 "@/components": path.resolve(__dirname, "../src/components"),
62 + "@/images": path.resolve(__dirname, "../src/assets/images"),
63 + "@/assets": path.resolve(__dirname, "../src/assets"),
62 }, 64 },
63 sourceRoot: 'src', 65 sourceRoot: 'src',
64 outputRoot: 'dist', 66 outputRoot: 'dist',
......
1 /* 1 /*
2 * @Date: 2022-09-19 14:11:05 2 * @Date: 2022-09-19 14:11:05
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-19 14:18:43 4 + * @LastEditTime: 2022-09-21 09:49:03
5 * @FilePath: /swx/src/app.js 5 * @FilePath: /swx/src/app.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -9,6 +9,7 @@ import { createApp } from 'vue' ...@@ -9,6 +9,7 @@ import { createApp } from 'vue'
9 import { createPinia } from 'pinia' 9 import { createPinia } from 'pinia'
10 10
11 import './app.less' 11 import './app.less'
12 +import '@/components/vant-weapp/common/index.wxss'
12 13
13 const App = createApp({ 14 const App = createApp({
14 // 可以使用所有的 Vue 生命周期方法 15 // 可以使用所有的 Vue 生命周期方法
......
1 +@namespace: 'swx';
2 +
3 +/* ============ 颜色 ============ */
4 +
5 +// 主色调
6 +@base-color: #199A74;
7 +
8 +// 文字颜色
9 +@base-font-color: #333333;
10 +@sub-font-color: #999999;
11 +
12 +// 定义一个映射
13 +#colors() {
14 + base-color: @base-color;
15 + base-font-color: @base-font-color;
16 +}
17 +
18 +// 混合
19 +.width100 {
20 + width: 100%;
21 +}
1 <!-- 1 <!--
2 * @Date: 2022-09-20 15:39:37 2 * @Date: 2022-09-20 15:39:37
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-20 16:26:24 4 + * @LastEditTime: 2022-09-21 10:41:18
5 * @FilePath: /swx/src/components/activity-card.vue 5 * @FilePath: /swx/src/components/activity-card.vue
6 - * @Description: 文件描述 6 + * @Description: 活动卡片组件
7 --> 7 -->
8 <template> 8 <template>
9 - <view style="background-color: #FFFFFF; border-radius: 0.83rem;"> 9 + <view class="activity-card-page">
10 - <view style="padding: 0.8rem; border-bottom: 1px solid #F2F2F2;"> 10 + <view class="card-main">
11 <van-row> 11 <van-row>
12 - <van-col span="10"> 12 + <van-col :span="10">
13 - <van-image width="100%" height="5rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" style="" /> 13 + <van-image width="100%" height="5rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
14 </van-col> 14 </van-col>
15 - <van-col span="14"> 15 + <van-col :span="14">
16 - <view>智慧没有烦恼</view> 16 + <view class="card-main-text">
17 + <view style="font-size: 1.1rem;">智慧没有烦恼</view>
18 + <view class="status-text">
19 + <text>网络活动</text>
20 + </view>
21 + <view style="font-size: 0.95rem;">
22 + <van-icon name="clock-o" color="#BBBBBB" />&nbsp;2022-08-25 14:00
23 + </view>
24 + </view>
17 </van-col> 25 </van-col>
18 </van-row> 26 </van-row>
19 </view> 27 </view>
20 - <view style=""> 28 + <view class="card-sub">
29 + <van-row>
30 + <van-col :span="24">
31 + <view>
32 + <van-icon :name="icon_address" size="0.95rem" />&nbsp;上海市杨浦区军工路100号A座05室
33 + </view>
34 + </van-col>
35 + </van-row>
21 <van-row> 36 <van-row>
22 - <van-col span="19"> 37 + <van-col :span="19">
23 - <text>浏览：2996</text> 38 + <view style="line-height: 2;">
24 - <text>报名：4/无限</text> 39 + <text>浏览：2996</text>&nbsp;
25 - <text>岗位：3</text> 40 + <text>报名：444/无限</text>&nbsp;
41 + <text>岗位：333</text>
42 + </view>
26 </van-col> 43 </van-col>
27 - <van-col span="5"> 44 + <van-col :span="5">
28 - <view>我要报名</view> 45 + <view class="status-button">
46 + <text>我要报名</text>
47 + </view>
29 </van-col> 48 </van-col>
30 </van-row> 49 </van-row>
31 </view> 50 </view>
...@@ -34,10 +53,48 @@ ...@@ -34,10 +53,48 @@
34 53
35 <script setup> 54 <script setup>
36 import { ref } from 'vue' 55 import { ref } from 'vue'
37 - 56 +import icon_time from '@/images/icon/time@2x.png'
57 +import icon_address from '@/images/icon/address@2x.png'
38 </script> 58 </script>
39 59
40 <style lang="less"> 60 <style lang="less">
61 +@import '@/assets/styles/base.less';
62 +
63 +.activity-card-page {
64 + background-color: #FFFFFF;
65 + border-radius: 0.5rem;
66 + .card-main {
67 + padding: 0.8rem;
68 + border-bottom: 1px solid #F2F2F2;
69 + .card-main-text {
70 + padding: 0 0.5rem;
71 + }
72 + }
73 + .card-sub {
74 + padding: 0.85rem;
75 + font-size: 0.85rem;
76 + }
77 +}
78 +
79 +.status-text {
80 + margin: 0.5rem 0;
81 + text {
82 + font-size: 0.8rem;
83 + color: @base-color;
84 + background-color: #E9FAF4;
85 + border-radius: 0.8rem;
86 + padding: 0.25rem 0.5rem;
87 + }
88 +}
89 +.status-button {
90 + background-color: @base-color;
91 + color: #FFFFFF;
92 + border-radius: 1rem;
93 + text-align: center;
94 + padding: 0.25rem 0;
95 + font-size: 0.8rem;
96 +}
97 +
41 .van-image__img { 98 .van-image__img {
42 border-radius: 0.25rem; 99 border-radius: 0.25rem;
43 } 100 }
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-20 15:45:23 4 + * @LastEditTime: 2022-09-20 17:18:28
5 * @FilePath: /swx/src/pages/index/index.vue 5 * @FilePath: /swx/src/pages/index/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
22 </swiper-item> 22 </swiper-item>
23 </swiper> 23 </swiper>
24 </view> 24 </view>
25 - <view style="padding: 1rem;"> 25 + <view style="padding: 1rem 1rem 0.5rem 1rem;">
26 - <text class="bg-gradient">推荐活动</text> 26 + <text class="bg-gradient" style="font-size: 1.15rem;">推荐活动</text>
27 </view> 27 </view>
28 - <view style="padding: 1rem;"> 28 + <view style="padding: 0 1rem;">
29 <activity-card></activity-card> 29 <activity-card></activity-card>
30 </view> 30 </view>
31 </template> 31 </template>
......