This commit is contained in:
parent
1865f220a3
commit
5e8f52b2a4
|
|
@ -0,0 +1,10 @@
|
|||
import request from '@/utils/request';
|
||||
|
||||
// 获取订单列表
|
||||
export function getOrderList(params) {
|
||||
return request({
|
||||
url: '/leopen/order/flow/query',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
|
@ -25,7 +25,8 @@
|
|||
{
|
||||
"path": "pages/work/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单"
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#F9FBFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div class="list">
|
||||
<div
|
||||
class="list-item"
|
||||
:class="{ active: active == index }"
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
@click="handleTab(index)"
|
||||
>
|
||||
<div style="padding: 0 5px">{{ item }}</div>
|
||||
<div v-if="active == index" class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
tabList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('🚀 ~ mounted ~ tabs:', this.tabList)
|
||||
},
|
||||
methods: {
|
||||
handleTab(index) {
|
||||
this.active = index
|
||||
this.$emit('changeTab', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.list-item {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
color: rgba(15, 39, 75, 0.8);
|
||||
margin-right: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
.active {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #0f274b;
|
||||
z-index: 9;
|
||||
}
|
||||
.line {
|
||||
width: 36px;
|
||||
height: 8px;
|
||||
background: linear-gradient(90deg, #ff6816 0%, rgba(255, 104, 22, 0) 100%);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<view class="work-container">
|
||||
<!-- 轮播图 -->
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
|
||||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
||||
<swiper-item v-for="(item, index) in data" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="系统管理" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="person-filled" size="30"></uni-icons>
|
||||
<text class="text">库存查询</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="staff-filled" size="30"></uni-icons>
|
||||
<text class="text">角色管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="color" size="30"></uni-icons>
|
||||
<text class="text">菜单管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="settings-filled" size="30"></uni-icons>
|
||||
<text class="text">部门管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="heart-filled" size="30"></uni-icons>
|
||||
<text class="text">岗位管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="bars" size="30"></uni-icons>
|
||||
<text class="text">字典管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="gear-filled" size="30"></uni-icons>
|
||||
<text class="text">参数设置</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="chat-filled" size="30"></uni-icons>
|
||||
<text class="text">通知公告</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="wallet-filled" size="30"></uni-icons>
|
||||
<text class="text">日志管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
swiperDotIndex: 0,
|
||||
data: [{
|
||||
image: '/static/images/banner/banner01.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner02.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner03.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickBannerItem(item) {
|
||||
console.info(item)
|
||||
},
|
||||
changeSwiper(e) {
|
||||
this.current = e.detail.current
|
||||
},
|
||||
changeGrid(e) {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.uni-swiper-dot-box {
|
||||
width: 400px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: 0 auto;
|
||||
/* #endif */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,183 +1,281 @@
|
|||
<template>
|
||||
<view class="work-container">
|
||||
<!-- 轮播图 -->
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
|
||||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
||||
<swiper-item v-for="(item, index) in data" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<div class="content">
|
||||
<div class="top-cont">
|
||||
<div class="top-title">订单</div>
|
||||
<u-input
|
||||
v-model="searchValue"
|
||||
class="top-ipt"
|
||||
placeholder="请输入食堂、档口、菜品/商品名"
|
||||
shape="circle"
|
||||
suffixIcon="../../static/images/search.png"
|
||||
suffixIconStyle="color: #909399"
|
||||
placeholderStyle="font-weight: 400;font-size: 10px;color: rgba(15,39,75,0.4);"
|
||||
@blur="handleSearch"
|
||||
></u-input>
|
||||
<div class="top-filter">
|
||||
<span style="font-size: 12px; color: #0f274b">筛选</span>
|
||||
<u-icon name="../../static/images/pull.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="系统管理" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="person-filled" size="30"></uni-icons>
|
||||
<text class="text">库存查询</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="staff-filled" size="30"></uni-icons>
|
||||
<text class="text">角色管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="color" size="30"></uni-icons>
|
||||
<text class="text">菜单管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="settings-filled" size="30"></uni-icons>
|
||||
<text class="text">部门管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="heart-filled" size="30"></uni-icons>
|
||||
<text class="text">岗位管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="bars" size="30"></uni-icons>
|
||||
<text class="text">字典管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="gear-filled" size="30"></uni-icons>
|
||||
<text class="text">参数设置</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="chat-filled" size="30"></uni-icons>
|
||||
<text class="text">通知公告</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="wallet-filled" size="30"></uni-icons>
|
||||
<text class="text">日志管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
<Tabs :tabList="tabList" @changeTab="changeTab" />
|
||||
|
||||
<div>
|
||||
<div class="order-list" v-for="(item, index) in tableList" :key="index">
|
||||
<div class="flex justify-between">
|
||||
<div class="order-source">订单来源：{{ item.sourceType }}</div>
|
||||
<div style="color: rgba(15, 39, 75, 0.8)">{{ handleOrderState(item.ordState) }}</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<span style="color: #0f274b">{{ item.canteenName }}</span>
|
||||
<span class="intervalName">{{ item.intervalName }}</span>
|
||||
</div>
|
||||
<div style="color: rgba(15, 39, 75, 0.8)">就餐时间：{{ item.orderTime }}</div>
|
||||
</div>
|
||||
<div class="img-cont">
|
||||
<div class="img" v-for="(goods, index) in item.detailList" :key="index">
|
||||
<u-image :src="goods.goodsDishesImgUrl" width="80px" height="80px" />
|
||||
<div>{{ goods.goodsDishesName }}</div>
|
||||
</div>
|
||||
<div class="price">
|
||||
<div>
|
||||
<span>￥</span>
|
||||
<span style="font-size: 18px">{{ item.realAmount }}</span>
|
||||
</div>
|
||||
<div style="color: rgba(15, 39, 75, 0.6)">共{{ item.detailList.length }}件</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-cont">
|
||||
<div v-if="item.ordState != 10">
|
||||
<u-button size="small">评价</u-button>
|
||||
</div>
|
||||
<div v-if="item.ordState == 10">
|
||||
<u-button size="small">删除订单</u-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin: 20px 0" v-if="tableList.length > 0">
|
||||
<u-loadmore :status="status" />
|
||||
</div>
|
||||
<div v-else class="flex justify-center align-center" style="height: 50vh">
|
||||
<u-empty icon="../../static/images/not_order.png" text="暂无相关订单" textColor="#000" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
swiperDotIndex: 0,
|
||||
data: [{
|
||||
image: '/static/images/banner/banner01.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner02.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner03.jpg'
|
||||
}
|
||||
]
|
||||
import { getOrderList } from '@/api/dining-hall'
|
||||
import Tabs from '@/pages/components/Tabs.vue'
|
||||
|
||||
export default {
|
||||
components: { Tabs },
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
searchValue: '',
|
||||
status: 'loadmore',
|
||||
tabList: ['全部订单', '待评价', '退款'],
|
||||
tableList: [
|
||||
{
|
||||
sourceType: 'hygyy双屏消费机', // 订单来源
|
||||
canteenName: '宏源工业园/本周菜谱', // 订单来源
|
||||
intervalName: '午餐', // 餐次
|
||||
ordState: 11, // 订单状态 1 已下单 9 已取消 10 已退款 11 已完成
|
||||
orderTime: '2024-08-12', // 下单时间
|
||||
realAmount: 30.2, // 实付金额
|
||||
detailList: [
|
||||
{
|
||||
goodsDishesName: '苹果', // 商品名称
|
||||
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg' // 商品图片
|
||||
},
|
||||
{
|
||||
goodsDishesName: '苹果', // 商品名称
|
||||
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
|
||||
},
|
||||
{
|
||||
goodsDishesName: '苹果', // 商品名称
|
||||
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
|
||||
}
|
||||
] // 订单详情
|
||||
},
|
||||
{
|
||||
sourceType: 'hygyy双屏消费机', // 订单来源
|
||||
canteenName: '宏源工业园/本周菜谱', // 订单来源
|
||||
intervalName: '午餐', // 餐次
|
||||
ordState: 10, // 订单状态 1 已下单 9 已取消 10 已退款 11 已完成
|
||||
orderTime: '2024-08-12', // 下单时间
|
||||
realAmount: 30.2, // 实付金额
|
||||
detailList: [
|
||||
{
|
||||
goodsDishesName: '苹果', // 商品名称
|
||||
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg' // 商品图片
|
||||
},
|
||||
{
|
||||
goodsDishesName: '苹果', // 商品名称
|
||||
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
|
||||
},
|
||||
{
|
||||
goodsDishesName: '苹果', // 商品名称
|
||||
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
|
||||
}
|
||||
] // 订单详情
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
console.log('搜索', this.searchValue)
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
console.log('获取列表')
|
||||
const params = {
|
||||
custId: 0,
|
||||
custThridId: 0,
|
||||
custNum: 0,
|
||||
endDateTime: '',
|
||||
pageNum: this.pageNum,
|
||||
pageSize: this.pageSize,
|
||||
rechargeState: '',
|
||||
startDateTime: '',
|
||||
tradeType: '',
|
||||
searchValue: this.searchValue
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getOrderList(params)
|
||||
console.log('🚀 ~ getList ~ res:', res)
|
||||
this.tableList = res.data.orderInfoList
|
||||
this.total = res.data.count
|
||||
this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickBannerItem(item) {
|
||||
console.info(item)
|
||||
},
|
||||
changeSwiper(e) {
|
||||
this.current = e.detail.current
|
||||
},
|
||||
changeGrid(e) {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
onReachBottom() {
|
||||
console.log('🚀 ~ onReachBottom ~ ')
|
||||
if (this.total < 10 || this.total == this.tableList.length) {
|
||||
this.status = 'nomore'
|
||||
return
|
||||
}
|
||||
this.status = 'loading'
|
||||
setTimeout(() => {
|
||||
this.pageSize += 10
|
||||
this.getList()
|
||||
if (this.tableList.length != this.total) this.status = 'loadmore'
|
||||
else this.status = 'nomore'
|
||||
}, 500)
|
||||
console.log('加载..', this.pageSize)
|
||||
},
|
||||
changeTab(index) {
|
||||
console.log('🚀 ~ changeTab ~ index:', index)
|
||||
this.tabIndex = index
|
||||
},
|
||||
// 处理订单状态展示
|
||||
handleOrderState(state) {
|
||||
switch (state) {
|
||||
case 1:
|
||||
return '已下单'
|
||||
case 9:
|
||||
return '已取消'
|
||||
case 10:
|
||||
return '已退款'
|
||||
case 11:
|
||||
return '已完成'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
padding: 16px;
|
||||
background: #f9fbff;
|
||||
min-height: 100vh;
|
||||
|
||||
.top-cont {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.uni-swiper-dot-box {
|
||||
width: 400px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: 0 auto;
|
||||
/* #endif */
|
||||
margin-top: 8px;
|
||||
margin-bottom: 20px;
|
||||
.top-title {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #0f274b;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
.top-ipt {
|
||||
height: 31px;
|
||||
background: #fff;
|
||||
margin-left: 26px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.top-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
padding: 8px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.order-source {
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
color: #0f274b;
|
||||
}
|
||||
|
||||
.intervalName {
|
||||
margin-left: 10px;
|
||||
color: #ff6816;
|
||||
border-radius: 1px 1px 1px 1px;
|
||||
border: 1px solid #ff6816;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.img-cont {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
div {
|
||||
margin-top: 8px;
|
||||
color: #0f274b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #0f274b;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-cont {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 211 B |
Binary file not shown.
|
After Width: | Height: | Size: 708 B |
Loading…
Reference in New Issue