首页
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": "智能货柜", "navigationStyle": "custom"}}], "globalStyle": {"navigationBarTextStyle": "black", "navigationBarTitleText": "智能货柜", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8"}}
|
||||||
"pages": [{
|
|
||||||
"path": "pages/index/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "uni-app"
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
"globalStyle": {
|
|
||||||
"navigationBarTextStyle": "black",
|
|
||||||
"navigationBarTitleText": "uni-app",
|
|
||||||
"navigationBarBackgroundColor": "#F8F8F8",
|
|
||||||
"backgroundColor": "#F8F8F8",
|
|
||||||
"app-plus": {
|
|
||||||
"background": "#efeff4"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+193
-21
@@ -1,29 +1,201 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="app-container">
|
||||||
|
<!-- 商品展示区域 -->
|
||||||
|
<scroll-view class="product-area" scroll-y>
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="section-title">热销商品</view>
|
||||||
|
|
||||||
<view class="intro">aaaa本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
|
<!-- 商品列表 - 三列 -->
|
||||||
<text class="intro">详见1：</text>
|
<view class="product-grid">
|
||||||
<uni-link :href="href" :text="href"></uni-link>
|
<view
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
href: 'https://uniapp.dcloud.io/component/README?id=uniui'
|
currentTab: 'home',
|
||||||
}
|
productList: [
|
||||||
},
|
{ name: '君乐宝450ml悦鲜活', price: '0.01', image: '/static/c1.png' },
|
||||||
methods: {
|
{ 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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.container {
|
.app-container {
|
||||||
padding: 20px;
|
display: flex;
|
||||||
font-size: 14px;
|
flex-direction: column;
|
||||||
line-height: 24px;
|
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>
|
</style>
|
||||||
Reference in New Issue
Block a user