146 lines
3.1 KiB
Vue
146 lines
3.1 KiB
Vue
|
<script setup>
|
||
|
|
/**
|
||
|
|
* 线下店铺
|
||
|
|
*/
|
||
|
|
import {
|
||
|
|
ref,
|
||
|
|
reactive,
|
||
|
|
getCurrentInstance,
|
||
|
|
defineExpose,
|
||
|
|
} from 'vue'
|
||
|
|
// 工具库
|
||
|
|
import util from '@/common/js/util.js'
|
||
|
|
//
|
||
|
|
import api from '@/api/index.js'
|
||
|
|
// 商品列表
|
||
|
|
import productList from '@/components/shop/productList/productList'
|
||
|
|
|
||
|
|
const {
|
||
|
|
proxy
|
||
|
|
} = getCurrentInstance()
|
||
|
|
|
||
|
|
// 初始化
|
||
|
|
function init() {
|
||
|
|
//
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
init,
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="header oh pt20 plr30 pb30 br20">
|
||
|
|
<view class="location df aic">
|
||
|
|
<uni-icons class="b" type="location" size="40rpx" />
|
||
|
|
<view class="name thd">希岸酒店</view>
|
||
|
|
<uni-icons type="right" />
|
||
|
|
<view class="f1"></view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="rows mt20">
|
||
|
|
<view class="searchBox rows f1 bfff bar">
|
||
|
|
<input class="f1 mlr20" type="text" placeholder="请输入" />
|
||
|
|
<view class="btn bar sm button plr20">搜索</view>
|
||
|
|
</view>
|
||
|
|
<uni-icons type="scan" size="60rpx" class="ml20" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 频道 -->
|
||
|
|
<view class="channel bfff">
|
||
|
|
<view class="item fmid fdc ptb30">
|
||
|
|
<image class="image wh80 br10" src="/static/logo.png" mode="aspectFill" />
|
||
|
|
<view class="name mt10 c333 f28">休闲娱乐</view>
|
||
|
|
</view>
|
||
|
|
<view class="item fmid fdc ptb30">
|
||
|
|
<image class="image wh80 br10" src="/static/logo.png" mode="aspectFill" />
|
||
|
|
<view class="name mt10 c333 f28">美食/堂食</view>
|
||
|
|
</view>
|
||
|
|
<view class="item fmid fdc ptb30">
|
||
|
|
<image class="image wh80 br10" src="/static/logo.png" mode="aspectFill" />
|
||
|
|
<view class="name mt10 c333 f28">酒店 | 民宿</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 精品推荐 -->
|
||
|
|
<view class="recommend">
|
||
|
|
<view class="title ptb15 plr30 c333 f44 bfff">精品推荐</view>
|
||
|
|
<view class="list mt30 mb80 plr30">
|
||
|
|
<view class="item bfff" v-for="(item,index) in 10" :key="index">
|
||
|
|
<view class="icon">
|
||
|
|
<image class="image" src="/static/logo.png" mode="aspectFill" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="info ptb10 plr10">
|
||
|
|
<view class="name f32">项目名称</view>
|
||
|
|
<view class="price df aife">
|
||
|
|
<view class="now cFF4242">
|
||
|
|
<text class="f24">￥</text>
|
||
|
|
<text class="f30 b">100.00</text>
|
||
|
|
</view>
|
||
|
|
<view class="old c999 f24 mlr10">
|
||
|
|
<text class="">￥</text>
|
||
|
|
<text class="">200</text>
|
||
|
|
</view>
|
||
|
|
<view class="discount plr10 cFF4242 f24 br4">5.0折</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
// 顶部
|
||
|
|
.header {
|
||
|
|
background-color: rgb(255, 155, 25);
|
||
|
|
|
||
|
|
.searchBox {
|
||
|
|
padding: 5rpx;
|
||
|
|
|
||
|
|
.button {
|
||
|
|
background-color: rgb(255, 155, 25);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 频道
|
||
|
|
.channel {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 推荐
|
||
|
|
.recommend {
|
||
|
|
|
||
|
|
// 商品列表
|
||
|
|
.list {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
grid-gap: 15rpx;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
border-radius: 20rpx;
|
||
|
|
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
|
||
|
|
|
||
|
|
// 展示图
|
||
|
|
.image {
|
||
|
|
width: 100%;
|
||
|
|
height: 300rpx;
|
||
|
|
border-radius: 20rpx 20rpx 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 原价
|
||
|
|
.old {
|
||
|
|
text-decoration: line-through;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 折扣
|
||
|
|
.discount {
|
||
|
|
background-color: rgb(255, 241, 240);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|