yunxi
/
app-nx-personal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

home

Browse Source
dev
王文杰 10 months ago
parent a33a46e8cd
commit 77d921a945
17 changed files with 683 additions and 10 deletions
Show Stats Download Patch File Download Diff File

4
package-lock.json generated
Unescape View File

@ -1,11 +1,11 @@
{
"name": "uni-app-xiaotuxian",
"name": "uni-app-chanko",
"version": "0.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "uni-app-xiaotuxian",
"name": "uni-app-chanko",
"version": "0.0.0",
"dependencies": {
"@dcloudio/uni-app": "3.0.0-3090620231104002",

2
project.private.config.json
Unescape View File

@ -1,6 +1,6 @@
{
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"projectname": "uniapp-shop-vue3-ts",
"projectname": "app-nx-personal",
"setting": {
"compileHotReLoad": true
}

58
src/pages/index/components/Class.vue
Unescape View File

@ -0,0 +1,58 @@
<script setup lang="ts">
const list = [
{
id: 1,
name: '',
desc: '公司风采一标题占用两行',
},
{
id: 11,
name: '',
desc: '公司风采一标题占用两行',
},
{
id: 122,
name: '',
desc: '公司风采一标题占用两行',
},
]
const onClick = () => {}
const actionsClick = type => {}
</script>
<template>
<view class="class">
<view class="hd">
<view class="module-title">知识大课堂</view>
<view class="module-more">更多 > </view>
</view>
<view class="module-cont">
<view class="section" v-for="item in list" :key="item.id">
<image class="left" src="https://yanxuan-item.nosdn.127.net/ef56a7139fffe2650a7cd74deafd08da.png"></image>
<view class="right">
<view class="desc">{{item.desc}}</view>
<view class="footer">
<view class="num">4.2w人浏览</view>
<view class="action">
<view class="item">
<uni-icons type="redo" size="18" color="#999"></uni-icons>
<text class="text">分享</text>
</view>
<view class="item">
<uni-icons type="hand-up-filled" size="18" color="#999"></uni-icons>
<text class="text">点赞</text>
</view>
<view class="item">
<uni-icons type="chat" size="18" color="#999"></uni-icons>
<text class="text">评论</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss">
@import '../styles/class.scss';
</style>

54
src/pages/index/components/Community.vue
Unescape View File

@ -0,0 +1,54 @@
<script setup lang="ts">
const list = [
{
id: 1,
name: '',
desc: '公司风采一标题占用两行',
},
{
id: 11,
name: '',
desc: '公司风采一标题占用两行',
},
{
id: 122,
name: '',
desc: '公司风采一标题占用两行',
},
]
const onClick = () => {}
const actionsClick = type => {}
</script>
<template>
<view class="community">
<view class="hd">
<view class="module-title">精彩社区</view>
<view class="module-more">更多 > </view>
</view>
<view class="module-cont">
<view class="section" v-for="item in list" :key="item.id">
<image class="img" src="https://yanxuan-item.nosdn.127.net/ef56a7139fffe2650a7cd74deafd08da.png"></image>
<view class="desc">{{item.desc}}</view>
<view class="action">
<view class="item">
<uni-icons type="redo" size="18" color="#999"></uni-icons>
<text class="text">分享</text>
</view>
<view class="item">
<uni-icons type="hand-up-filled" size="18" color="#999"></uni-icons>
<text class="text">点赞</text>
</view>
<view class="item">
<uni-icons type="chat" size="18" color="#999"></uni-icons>
<text class="text">评论</text>
</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss">
@import '../styles/community.scss';
</style>

35
src/pages/index/components/NeighborhoodSite.vue
Unescape View File

@ -0,0 +1,35 @@
<script setup lang="ts">
const handlePhone = () => {
uni.makePhoneCall({
phoneNumber: '400-123-000', //仅为示例
})
}
</script>
<template>
<view class="neighborhood-site">
<view class="module-title">附近回收站</view>
<view class="module-cont">
<image class="left" src="https://img.36krcdn.com/20200410/v2_41365a0f26a244fdab8e3f5be081ed2b_img_000" />
<view class="md">
<view class="name">
<span class="zuijin"> 最近 </span>上海市松江区佘山镇
</view>
<view class="time">营业时间：09-18:00</view>
<view class="loction">上海市松江区新松江路92弄开元地中海园区</view>
</view>
<view class="right">
<view class="num">1.03km</view>
<image class="img" src="https://img.36krcdn.com/20200410/v2_41365a0f26a244fdab8e3f5be081ed2b_img_000" />
</view>
</view>
<view class="md-tag"><span class="tag-before">回收品类</span>旧衣·纸品·金属·家电·塑料·玻璃</view>
<view class="foot-desc">
<view class="item">特色服务：上门服务、家电维修</view>
<view class="item">优惠活动：预约回收立享双倍积分</view>
</view>
</view>
</template>
<style lang="scss">
@import '../styles/neighborhoodSite.scss';
</style>

17
src/pages/index/components/PhoneContact.vue
Unescape View File

@ -0,0 +1,17 @@
<script setup lang="ts">
const handlePhone = () => {
uni.makePhoneCall({
phoneNumber: '400-123-000', //仅为示例
})
}
</script>
<template>
<view class="phone-contact">
<view class="module-title">电话预约回收</view>
<view class="module-action" @tap="handlePhone">400-123-000</view>
</view>
</template>
<style lang="scss">
@import '../styles/phoneContact.scss';
</style>

19
src/pages/index/index.vue
Unescape View File

@ -7,8 +7,12 @@ import CustomNavbar from './components/CustomNavbar.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import PageSkeleton from './components/PageSkeleton.vue'
import { useGuessList } from '@/composables'
import PhoneContact from './components/PhoneContact.vue'
import NeighborhoodSite from './components/NeighborhoodSite.vue'
import Community from './components/Community.vue'
import Class from './components/Class.vue'
import { useGuessList } from '@/composables'
// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getHomeBannerData = async () => {
@ -126,9 +130,18 @@ const onRefresherrefresh = async () => {
<!-- 自定义轮播图 -->
<XtxSwiper :list="bannerList" />
<!-- 分类面板 -->
<CategoryPanel :list="categoryList" />
<CategoryPanel :list="categoryList" />
<!-- 电话联系> -->
<PhoneContact />
<!-- 附近回收站> -->
<NeighborhoodSite />
<!-- 社区服务中心 -->
<Community />
<!-- 课堂 -->
<Class />
<!-- 热门推荐 -->
<HotPanel :list="hotList" />
<!-- <HotPanel :list="hotList" /> -->
<!-- 猜你喜欢 -->
<XtxGuess ref="guessRef" />
</template>

7
src/pages/index/styles/category.scss
Unescape View File

@ -1,8 +1,11 @@
/* 前台类目 */
.category {
padding: 32rpx 20rpx;
margin: 16rpx;
background-color: #fff;
border-radius: 4rpx;
.module-title {
margin: 32rpx 32rpx 0;
font-size: 30rpx;
color: #0D0D26;
padding-bottom: 20rpx;
@ -16,7 +19,7 @@
flex-wrap: wrap;
min-height: 328rpx;
.category-item {
width: 48%;
width: 46%;
border-radius: 16rpx;
margin: 8rpx;
padding: 16rpx 0;

10
src/pages/index/styles/category.wxss
Unescape View File

@ -1,7 +1,13 @@
@charset "UTF-8";
/* 前台类目 */
.category {
padding: 32rpx 20rpx;
margin: 16rpx;
background-color: #fff;
border-radius: 4rpx;
}
.category .module-title {
margin: 32rpx 32rpx 0;
font-size: 30rpx;
color: #0D0D26;
padding-bottom: 20rpx;
@ -17,7 +23,7 @@
}
.category .cont .category-item {
width: 48%;
width: 46%;
border-radius: 16rpx;
margin: 8rpx;
padding: 16rpx 0;

72
src/pages/index/styles/class.scss
Unescape View File

@ -0,0 +1,72 @@
/* 前台类目 */
.class {
padding: 32rpx 20rpx;
margin: 16rpx;
border-radius: 4rpx;
.hd {
display: flex;
justify-content: space-between;
.module-title {
font-size: 30rpx;
color: #0D0D26;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #F2F2F2;
}
.module-more {
font-size: 30rpx;
color: #0D0D26;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #F2F2F2;
}
}
.module-cont {
// margin: 20rpx 0 0;
padding: 10rpx 0;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
min-height: 328rpx;
.section {
width: 100%;
border-radius: 16rpx;
margin: 8rpx;
padding: 16rpx 0;
display: flex;
justify-content: center; // flex-direction: row;
align-items: center;
box-sizing: border-box;
background: #fff;
.left {
width: 240rpx;
height: 216rpx;
}
.right {
flex: 1;
position: relative;
.desc {
font-size: 24rpx;
}
.footer {
margin: 80rpx 0 0;
display: flex;
flex-direction: row;
.num {
font-size: 24rpx;
}
.action {
display: flex;
flex-direction: row;
margin-left: 10rpx;
font-size: 24rpx;
.item {
margin: 0 4rpx;
display: flex;
align-items: center;
}
}
}
}
}
}
}

83
src/pages/index/styles/class.wxss
Unescape View File

@ -0,0 +1,83 @@
@charset "UTF-8";
/* 前台类目 */
.class {
padding: 32rpx 20rpx;
margin: 16rpx;
border-radius: 4rpx;
}
.class .hd {
display: flex;
justify-content: space-between;
}
.class .hd .module-title {
font-size: 30rpx;
color: #0D0D26;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #F2F2F2;
}
.class .hd .module-more {
font-size: 30rpx;
color: #0D0D26;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #F2F2F2;
}
.class .module-cont {
padding: 10rpx 0;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
min-height: 328rpx;
}
.class .module-cont .section {
width: 100%;
border-radius: 16rpx;
margin: 8rpx;
padding: 16rpx 0;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background: #fff;
}
.class .module-cont .section .left {
width: 240rpx;
height: 216rpx;
}
.class .module-cont .section .right {
flex: 1;
position: relative;
}
.class .module-cont .section .right .desc {
font-size: 24rpx;
}
.class .module-cont .section .right .footer {
margin: 80rpx 0 0;
display: flex;
flex-direction: row;
}
.class .module-cont .section .right .footer .num {
font-size: 24rpx;
}
.class .module-cont .section .right .footer .action {
display: flex;
flex-direction: row;
margin-left: 10rpx;
font-size: 24rpx;
}
.class .module-cont .section .right .footer .action .item {
margin: 0 4rpx;
display: flex;
align-items: center;
}

48
src/pages/index/styles/community.scss
Unescape View File

@ -0,0 +1,48 @@
.community {
padding: 32rpx 20rpx;
margin: 16rpx;
border-radius: 4rpx;
.hd {
display: flex;
justify-content: space-between;
align-items: center;
.module-title {
font-size: 32rpx;
font-weight: 500;
color: #0D0D26;
padding-bottom: 20rpx;
}
.module-more {
color: #95969D;
font-size: 24rpx;
}
}
.module-cont {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.section {
width: 47%;
height: auto;
margin: 10rpx 10rpx;
border-radius: 10rpx;
padding: 4rpx 10rpx;
background-color: #fff;
.img {
height: 200rpx;
}
.desc {
color: #0D0D26;
}
.action {
margin: 20rpx 0;
display: flex;
flex-direction: row;
.item {
flex: 1;
color: #95969D;
}
}
}
}
}

57
src/pages/index/styles/community.wxss
Unescape View File

@ -0,0 +1,57 @@
.community {
padding: 32rpx 20rpx;
margin: 16rpx;
border-radius: 4rpx;
}
.community .hd {
display: flex;
justify-content: space-between;
align-items: center;
}
.community .hd .module-title {
font-size: 32rpx;
font-weight: 500;
color: #0D0D26;
padding-bottom: 20rpx;
}
.community .hd .module-more {
color: #95969D;
font-size: 24rpx;
}
.community .module-cont {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.community .module-cont .section {
width: 47%;
height: auto;
margin: 10rpx 10rpx;
border-radius: 10rpx;
padding: 4rpx 10rpx;
background-color: #fff;
}
.community .module-cont .section .img {
height: 200rpx;
}
.community .module-cont .section .desc {
color: #0D0D26;
}
.community .module-cont .section .action {
margin: 20rpx 0;
display: flex;
flex-direction: row;
}
.community .module-cont .section .action .item {
flex: 1;
color: #95969D;
}

82
src/pages/index/styles/neighborhoodSite.scss
Unescape View File

@ -0,0 +1,82 @@
.neighborhood-site {
padding: 32rpx 20rpx;
margin: 16rpx;
background-color: #fff;
border-radius: 4rpx;
.module-title {
font-size: 30rpx;
color: #0D0D26;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #F2F2F2;
}
.module-cont {
padding: 20rpx 0;
display: flex;
flex-direction: row;
.left {
width: 140rpx;
height: 140rpx;
border-radius: 12rpx;
}
.md {
flex: 1;
margin: 0 10rpx;
font-size: 24rpx;
color: #0D0D26;
.name {
font-size: 30rpx;
.zuijin {
font-size: 24rpx;
color: #FF7D00;
background: #FFF7E8;
padding: 4rpx 4rpx;
margin-right: 6rpx;
border-radius: 4rpx;
}
}
.time {
color: #95969D;
margin: 8rpx 0;
}
.loction {
color: #0D0D26;
}
}
.right {
.num {
font-size: 28rpx;
color: #95969D
}
.img {
width: 72rpx;
height: 72rpx;
margin-top: 20rpx;
border-radius: 10rpx;
}
}
}
.md-tag {
background: #E8FFFB;
color: #0FC6C2;
margin: 10rpx 0;
font-weight: 400;
font-size: 24rpx;
padding: 6rpx 0rpx;
.tag-before {
background: #0FC6C2;
color: #fff;
font-size: 24rpx;
font-weight: 500;
padding: 4rpx 8rpx;
border-radius: 4rpx;
margin-right: 10rpx;
}
}
.foot-desc {
.item {
font-size: 24rpx;
color: #95969D;
margin: 10rpx 0;
}
}
}

91
src/pages/index/styles/neighborhoodSite.wxss
Unescape View File

@ -0,0 +1,91 @@
.neighborhood-site {
padding: 32rpx 20rpx;
margin: 16rpx;
background-color: #fff;
border-radius: 4rpx;
}
.neighborhood-site .module-title {
font-size: 30rpx;
color: #0D0D26;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #F2F2F2;
}
.neighborhood-site .module-cont {
padding: 20rpx 0;
display: flex;
flex-direction: row;
}
.neighborhood-site .module-cont .left {
width: 140rpx;
height: 140rpx;
border-radius: 12rpx;
}
.neighborhood-site .module-cont .md {
flex: 1;
margin: 0 10rpx;
font-size: 24rpx;
color: #0D0D26;
}
.neighborhood-site .module-cont .md .name {
font-size: 30rpx;
}
.neighborhood-site .module-cont .md .name .zuijin {
font-size: 24rpx;
color: #FF7D00;
background: #FFF7E8;
padding: 4rpx 4rpx;
margin-right: 6rpx;
border-radius: 4rpx;
}
.neighborhood-site .module-cont .md .time {
color: #95969D;
margin: 8rpx 0;
}
.neighborhood-site .module-cont .md .loction {
color: #0D0D26;
}
.neighborhood-site .module-cont .right .num {
font-size: 28rpx;
color: #95969D;
}
.neighborhood-site .module-cont .right .img {
width: 72rpx;
height: 72rpx;
margin-top: 20rpx;
border-radius: 10rpx;
}
.neighborhood-site .md-tag {
background: #E8FFFB;
color: #0FC6C2;
margin: 10rpx 0;
font-weight: 400;
font-size: 24rpx;
padding: 6rpx 0rpx;
}
.neighborhood-site .md-tag .tag-before {
background: #0FC6C2;
color: #fff;
font-size: 24rpx;
font-weight: 500;
padding: 4rpx 8rpx;
border-radius: 4rpx;
margin-right: 10rpx;
}
.neighborhood-site .foot-desc .item {
font-size: 24rpx;
color: #95969D;
margin: 10rpx 0;
}

26
src/pages/index/styles/phoneContact.scss
Unescape View File

@ -0,0 +1,26 @@
/* 热门推荐 */
.phone-contact {
padding: 32rpx 20rpx;
margin: 16rpx;
background-color: #fff;
border-radius: 4rpx;
.module-title {
font-size: 30rpx;
color: #0D0D26;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #F2F2F2;
}
.module-action {
width: 486rpx;
margin: 40rpx auto 0;
border-radius: 50px;
background: #5386E4;
color: #fff;
display: flex;
font-size: 32rpx;
justify-content: center;
align-items: center;
padding: 20rpx 100rpx;
}
}

28
src/pages/index/styles/phoneContact.wxss
Unescape View File

@ -0,0 +1,28 @@
@charset "UTF-8";
/* 热门推荐 */
.phone-contact {
padding: 32rpx 20rpx;
margin: 16rpx;
background-color: #fff;
border-radius: 4rpx;
}
.phone-contact .module-title {
font-size: 30rpx;
color: #0D0D26;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #F2F2F2;
}
.phone-contact .module-action {
width: 486rpx;
margin: 40rpx auto 0;
border-radius: 50px;
background: #5386E4;
color: #fff;
display: flex;
font-size: 32rpx;
justify-content: center;
align-items: center;
padding: 20rpx 100rpx;
}
Write Preview
Loading…
Cancel
Save