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 = {
"@/utils": path.resolve(__dirname, "../src/utils"),
"@/vant": path.resolve(__dirname, "../src/components/vant-weapp"),
"@/components": path.resolve(__dirname, "../src/components"),
"@/images": path.resolve(__dirname, "../src/assets/images"),
"@/assets": path.resolve(__dirname, "../src/assets"),
},
sourceRoot: 'src',
outputRoot: 'dist',
......
/*
* @Date: 2022-09-19 14:11:05
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-19 14:18:43
* @LastEditTime: 2022-09-21 09:49:03
* @FilePath: /swx/src/app.js
* @Description: 文件描述
*/
......@@ -9,6 +9,7 @@ import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './app.less'
import '@/components/vant-weapp/common/index.wxss'
const App = createApp({
// 可以使用所有的 Vue 生命周期方法
......
@namespace: 'swx';
/* ============ 颜色 ============ */
// 主色调
@base-color: #199A74;
// 文字颜色
@base-font-color: #333333;
@sub-font-color: #999999;
// 定义一个映射
#colors() {
base-color: @base-color;
base-font-color: @base-font-color;
}
// 混合
.width100 {
width: 100%;
}
<!--
* @Date: 2022-09-20 15:39:37
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-20 16:26:24
* @LastEditTime: 2022-09-21 10:41:18
* @FilePath: /swx/src/components/activity-card.vue
* @Description: 文件描述
* @Description: 活动卡片组件
-->
<template>
<view style="background-color: #FFFFFF; border-radius: 0.83rem;">
<view style="padding: 0.8rem; border-bottom: 1px solid #F2F2F2;">
<view class="activity-card-page">
<view class="card-main">
<van-row>
<van-col span="10">
<van-image width="100%" height="5rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" style="" />
<van-col :span="10">
<van-image width="100%" height="5rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
</van-col>
<van-col span="14">
<view>智慧没有烦恼</view>
<van-col :span="14">
<view class="card-main-text">
<view style="font-size: 1.1rem;">智慧没有烦恼</view>
<view class="status-text">
<text>网络活动</text>
</view>
<view style="font-size: 0.95rem;">
<van-icon name="clock-o" color="#BBBBBB" />&nbsp;2022-08-25 14:00
</view>
</view>
</van-col>
</van-row>
</view>
<view style="">
<view class="card-sub">
<van-row>
<van-col span="19">
<text>浏览：2996</text>
<text>报名：4/无限</text>
<text>岗位：3</text>
<van-col :span="24">
<view>
<van-icon :name="icon_address" size="0.95rem" />&nbsp;上海市杨浦区军工路100号A座05室
</view>
</van-col>
<van-col span="5">
<view>我要报名</view>
</van-row>
<van-row>
<van-col :span="19">
<view style="line-height: 2;">
<text>浏览：2996</text>&nbsp;
<text>报名：444/无限</text>&nbsp;
<text>岗位：333</text>
</view>
</van-col>
<van-col :span="5">
<view class="status-button">
<text>我要报名</text>
</view>
</van-col>
</van-row>
</view>
......@@ -34,10 +53,48 @@
<script setup>
import { ref } from 'vue'
import icon_time from '@/images/icon/time@2x.png'
import icon_address from '@/images/icon/address@2x.png'
</script>
<style lang="less">
@import '@/assets/styles/base.less';
.activity-card-page {
background-color: #FFFFFF;
border-radius: 0.5rem;
.card-main {
padding: 0.8rem;
border-bottom: 1px solid #F2F2F2;
.card-main-text {
padding: 0 0.5rem;
}
}
.card-sub {
padding: 0.85rem;
font-size: 0.85rem;
}
}
.status-text {
margin: 0.5rem 0;
text {
font-size: 0.8rem;
color: @base-color;
background-color: #E9FAF4;
border-radius: 0.8rem;
padding: 0.25rem 0.5rem;
}
}
.status-button {
background-color: @base-color;
color: #FFFFFF;
border-radius: 1rem;
text-align: center;
padding: 0.25rem 0;
font-size: 0.8rem;
}
.van-image__img {
border-radius: 0.25rem;
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-20 15:45:23
* @LastEditTime: 2022-09-20 17:18:28
* @FilePath: /swx/src/pages/index/index.vue
* @Description: 首页
-->
......@@ -22,10 +22,10 @@
</swiper-item>
</swiper>
</view>
<view style="padding: 1rem;">
<text class="bg-gradient">推荐活动</text>
<view style="padding: 1rem 1rem 0.5rem 1rem;">
<text class="bg-gradient" style="font-size: 1.15rem;">推荐活动</text>
</view>
<view style="padding: 1rem;">
<view style="padding: 0 1rem;">
<activity-card></activity-card>
</view>
</template>
......