首页
This commit is contained in:
kk
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"version" : "1.0",
|
||||
"configurations" : [
|
||||
{
|
||||
"openVueDevtools" : true,
|
||||
"type" : "uni-app:h5"
|
||||
}
|
||||
]
|
||||
}
|
||||
+1
-17
@@ -1,17 +1 @@
|
||||
{
|
||||
"pages": [{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "uni-app"
|
||||
}
|
||||
}],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"app-plus": {
|
||||
"background": "#efeff4"
|
||||
}
|
||||
}
|
||||
}
|
||||
{"pages": [{"path": "pages/index/index", "style": {"navigationBarTitleText": "智能货柜", "navigationStyle": "custom"}}], "globalStyle": {"navigationBarTextStyle": "black", "navigationBarTitleText": "智能货柜", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8"}}
|
||||
+201
-29
@@ -1,29 +1,201 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view class="intro">aaaa本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
|
||||
<text class="intro">详见1：</text>
|
||||
<uni-link :href="href" :text="href"></uni-link>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
href: 'https://uniapp.dcloud.io/component/README?id=uniui'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="app-container">
|
||||
<!-- 商品展示区域 -->
|
||||
<scroll-view class="product-area" scroll-y>
|
||||
<!-- 标题 -->
|
||||
<view class="section-title">热销商品</view>
|
||||
|
||||
<!-- 商品列表 - 三列 -->
|
||||
<view class="product-grid">
|
||||
<view
|
||||
v-for="(item, index) in productList"
|
||||
:key="index"
|
||||
class="product-card"
|
||||
>
|
||||
<image class="product-img" :src="item.image" mode="aspectFill" />
|
||||
<view class="product-name">{{ item.name }}</view>
|
||||
<view class="product-price">{{ item.price }}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<view class="tab-bar">
|
||||
<view class="tab-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">
|
||||
<text class="tab-text">首页</text>
|
||||
</view>
|
||||
|
||||
<!-- 开门按钮 - 圆形凸起 -->
|
||||
<view class="door-btn-wrapper" @click="handleOpenDoor">
|
||||
<view class="door-btn">开门</view>
|
||||
</view>
|
||||
|
||||
<view class="tab-item" :class="{ active: currentTab === 'mine' }" @click="switchTab('mine')">
|
||||
<text class="tab-text">我的</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTab: 'home',
|
||||
productList: [
|
||||
{ name: '君乐宝450ml悦鲜活', price: '0.01', image: '/static/c1.png' },
|
||||
{ name: '白红（0.0.0.0-9.9.9）', price: '0.06', image: '/static/c2.png' },
|
||||
{ name: '白桔（0.0.0.0-5.5.5）', price: '0.05', image: '/static/c3.png' },
|
||||
{ name: '可口可乐330ml', price: '3.00', image: '/static/c4.png' },
|
||||
{ name: '农夫山泉550ml', price: '2.00', image: '/static/c5.png' },
|
||||
{ name: '乐事薯片原味75g', price: '7.50', image: '/static/c6.png' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
switchTab(tab) {
|
||||
this.currentTab = tab;
|
||||
},
|
||||
handleOpenDoor() {
|
||||
uni.showModal({
|
||||
title: '开门',
|
||||
content: '确认打开柜门？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '柜门已打开', icon: 'success' });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* ========== 商品区域 ========== */
|
||||
.product-area {
|
||||
flex: 1;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
/* 热销商品标题 */
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
padding: 24rpx 28rpx 16rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 三列网格 */
|
||||
.product-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 12rpx;
|
||||
gap: 12rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 每列占1/3 */
|
||||
.product-card {
|
||||
width: calc((100% - 24rpx) / 3);
|
||||
background: transparent;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
text-align: center; /* 居中 */
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
display: block;
|
||||
border-radius: 8rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
/* 商品名称：居中 + 单行超出省略 */
|
||||
.product-name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
padding: 10rpx 8rpx 6rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 价格：红色加粗 + 居中 */
|
||||
.product-price {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #e4393c;
|
||||
padding: 0 8rpx 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ========== 底部导航栏 ========== */
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 999;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx; /* 变小一点 */
|
||||
color: #999;
|
||||
font-weight: normal; /* 不加粗 */
|
||||
}
|
||||
|
||||
.tab-item.active .tab-text {
|
||||
color: #2979ff;
|
||||
}
|
||||
|
||||
/* ========== 开门按钮 - 更大、更高 ========== */
|
||||
.door-btn-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: -80rpx; /* 更往上凸起 */
|
||||
}
|
||||
|
||||
.door-btn {
|
||||
width: 160rpx; /* 更大的圆 */
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
color: #fff;
|
||||
font-size: 38rpx; /* 更大的字 */
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10rpx 36rpx rgba(41, 121, 255, 0.55);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user