模板内容调整
This commit is contained in:
Dftre
parent
000dd462ab
commit
88eee3f358
67
package.json
67
package.json
@ -41,45 +41,46 @@
|
||||
"clean:windows": "rd /s /q dist || rd /s /q node_modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-app": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-components": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-h5": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-mp-alipay": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-mp-baidu": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-mp-jd": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-mp-kuaishou": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-mp-lark": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-mp-qq": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-mp-toutiao": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-mp-xhs": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-4000820240401001",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15",
|
||||
"@dcloudio/uni-app": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-app-harmony": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-components": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-h5": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-mp-alipay": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-mp-baidu": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-mp-jd": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-mp-kuaishou": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-mp-lark": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-mp-qq": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-mp-toutiao": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
|
||||
"@jridgewell/sourcemap-codec": "^1.5.0",
|
||||
"@qiun/wx-ucharts": "2.5.0-20230101",
|
||||
"@ttou/uview-typings": "^2.0.5",
|
||||
"clipboard": "^2.0.11",
|
||||
"dayjs": "^1.11.9",
|
||||
"dayjs": "^1.11.13",
|
||||
"mqtt": "4.1.0",
|
||||
"pinia": "2.0.17",
|
||||
"tslib": "^2.6.2",
|
||||
"uview-plus": "^3.1.45",
|
||||
"vue": "3.4.23",
|
||||
"vue-i18n": "^9.10.2"
|
||||
"pinia": "2.2.2",
|
||||
"tslib": "^2.7.0",
|
||||
"uview-plus": "^3.3.32",
|
||||
"vue": "3.4.21",
|
||||
"vue-i18n": "^10.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@dcloudio/types": "^3.4.8",
|
||||
"@dcloudio/uni-automator": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-4000820240401001",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-4000820240401001",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-4000820240401001",
|
||||
"@vue/runtime-core": "^3.3.11",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"@dcloudio/types": "^3.4.12",
|
||||
"@dcloudio/uni-automator": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-4020420240722002",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-4020420240722002",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002",
|
||||
"@vue/runtime-core": "^3.5.5",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"less": "^4.2.0",
|
||||
"sass": "^1.66.1",
|
||||
"sass-loader": "^10.4.1",
|
||||
"typescript": "^4.9.5",
|
||||
"vite": "4.3.5",
|
||||
"vue-tsc": "^1.8.8"
|
||||
"sass": "^1.78.0",
|
||||
"sass-loader": "^16.0.1",
|
||||
"typescript": "^5.6.2",
|
||||
"vite": "5.4.5",
|
||||
"vue-tsc": "2.1.6"
|
||||
}
|
||||
}
|
||||
|
||||
4098
pnpm-lock.yaml
4098
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -1,15 +1,3 @@
|
||||
<template>
|
||||
<view class="card" :class="type" @click="$emit('click')">
|
||||
<image class="img" :src="img"/>
|
||||
<view class="right">
|
||||
<view class="title">{{ title }}</view>
|
||||
<view class="subTitle">{{ subTitle }}</view>
|
||||
<view class="price">￥ {{ price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
img: {
|
||||
@ -30,11 +18,20 @@ const props = defineProps({
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line'
|
||||
default: 'line' // line, rect
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="card" :class="type" @click="$emit('click')">
|
||||
<image class="img" :src="img" />
|
||||
<view class="content">
|
||||
<view class="title">{{ title }}</view>
|
||||
<view class="subTitle">{{ subTitle }}</view>
|
||||
<view class="price">￥{{ price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
padding: 0;
|
||||
@ -50,12 +47,14 @@ const props = defineProps({
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 240rpx;
|
||||
.line {
|
||||
display: flex;
|
||||
|
||||
.content {
|
||||
height: 200rpx;
|
||||
padding-left: 20rpx;
|
||||
|
||||
.title {
|
||||
width: 400rpx;
|
||||
@ -64,30 +63,27 @@ const props = defineProps({
|
||||
|
||||
.subTitle {
|
||||
width: 400rpx;
|
||||
height: 90rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgb(87, 87, 87);
|
||||
}
|
||||
|
||||
.price {
|
||||
position: absolute;
|
||||
font-size: 40rpx;
|
||||
color: red;
|
||||
bottom: 10rpx;
|
||||
width: 400rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rect {
|
||||
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
height: 500rpx;
|
||||
width: 350rpx;
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
margin: 10rpx;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.img {
|
||||
@ -96,13 +92,15 @@ const props = defineProps({
|
||||
width: 350rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 20rpx;
|
||||
position: absolute;
|
||||
height: 160rpx;
|
||||
width: 350rpx;
|
||||
top: 350rpx;
|
||||
left: 20rpx;
|
||||
.content {
|
||||
padding: 0 20rpx;
|
||||
margin: 0;
|
||||
height: 140rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
width: 330rpx;
|
||||
font-size: 25rpx;
|
||||
@ -110,17 +108,15 @@ const props = defineProps({
|
||||
|
||||
.subTitle {
|
||||
width: 330rpx;
|
||||
margin-top: 10rpx;
|
||||
height: 60rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgb(87, 87, 87);
|
||||
}
|
||||
|
||||
.price {
|
||||
position: absolute;
|
||||
font-size: 30rpx;
|
||||
color: red;
|
||||
bottom: 10rpx;
|
||||
width: 330rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
<template>
|
||||
<view class="menu" :class="type" :style="menuStyle" @click="$emit('click')">
|
||||
<image :src="icon" :style="imageStyle"></image>
|
||||
</view>
|
||||
<view class="title" :style="titleStype">{{ label }}</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
@ -36,14 +29,6 @@ const menuStyle = computed(() => {
|
||||
height: `${props.size + 40}rpx`
|
||||
}
|
||||
})
|
||||
|
||||
const imageStyle = computed(() => {
|
||||
return {
|
||||
width: `${props.size + (props.type === 'rect' ? 20 : 0)}rpx`,
|
||||
height: `${props.size + (props.type === 'rect' ? 20 : 0)}rpx`
|
||||
}
|
||||
})
|
||||
|
||||
const titleStype = computed(() => {
|
||||
return {
|
||||
width: `${props.size + 40}rpx`,
|
||||
@ -51,7 +36,12 @@ const titleStype = computed(() => {
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="menu" :class="type" :style="menuStyle" @click="$emit('click')">
|
||||
<image :src="icon" style="width: 100%;height: 100%"></image>
|
||||
</view>
|
||||
<view class="title" :style="titleStype">{{ label }}</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.menu {
|
||||
padding: 20rpx;
|
||||
@ -59,7 +49,7 @@ const titleStype = computed(() => {
|
||||
|
||||
.circle {
|
||||
padding: 20rpx;
|
||||
border-radius: 10000px;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:active {
|
||||
@ -68,7 +58,8 @@ const titleStype = computed(() => {
|
||||
}
|
||||
|
||||
.rect {
|
||||
padding: 0rpx;
|
||||
padding: 15rpx;
|
||||
margin-bottom: -15rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.5;
|
||||
@ -79,4 +70,3 @@ const titleStype = computed(() => {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,9 +8,11 @@
|
||||
<image class="geek-img" :src="img"></image>
|
||||
<view class="geek-label">{{ label }}</view>
|
||||
<view class="geek-sum">
|
||||
<view class=".geek-sum-1">￥{{ number.integerPart }}</view>
|
||||
<view class=".geek-sum-2">. {{ number.decimalPart }}</view>
|
||||
<view class=".geek-sum-3">共 {{ num }} 件</view>
|
||||
<view class="geek-price">
|
||||
<view class="geek-sum-1">￥{{ number.integerPart }}</view>
|
||||
<view class="geek-sum-2">. {{ number.decimalPart }}</view>
|
||||
</view>
|
||||
<view class="geek-sum-3">共 {{ num }} 件</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="geek-footer">
|
||||
@ -78,18 +80,23 @@ function formatNumber(num, place) {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.geek-card {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding: 28rpx 18rpx 26rpx 16rpx;
|
||||
padding: 20rpx;
|
||||
background-color: white;
|
||||
border: 1rpx solid rgb(183, 183, 183);
|
||||
border-radius: 50rpx;
|
||||
height: 400rpx;
|
||||
border-radius: 20rpx;
|
||||
height: 360rpx;
|
||||
width: 700rpx;
|
||||
margin: 25rpx;
|
||||
|
||||
.geek-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 60rpx;
|
||||
width: 664rpx;
|
||||
width: 100%;
|
||||
margin-bottom: 6rpx;
|
||||
|
||||
.geek-shop {
|
||||
@ -100,20 +107,16 @@ function formatNumber(num, place) {
|
||||
.geek-status {
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
font-size: 25rpx;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.geek-content {
|
||||
position: relative;
|
||||
|
||||
margin-bottom: 46rpx;
|
||||
height: 170rpx;
|
||||
height: auto;
|
||||
width: 664rpx;
|
||||
|
||||
.geek-img {
|
||||
@ -140,52 +143,50 @@ function formatNumber(num, place) {
|
||||
.geek-sum {
|
||||
position: absolute;
|
||||
top: 44rpx;
|
||||
right: 0rpx;
|
||||
right: 20rpx;
|
||||
|
||||
width: 126rpx;
|
||||
width: 150rpx;
|
||||
height: 84rpx;
|
||||
|
||||
.geek-sum-1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 32rpx;
|
||||
.geek-price {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-weight: bold;
|
||||
|
||||
.geek-sum-1 {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.geek-sum-2 {
|
||||
padding-top: 20rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.geek-sum-2 {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
left: 84rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.geek-sum-3 {
|
||||
position: absolute;
|
||||
top: 55rpx;
|
||||
left: 46rpx;
|
||||
font-size: 20rpx;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.geek-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 60rpx;
|
||||
width: 664rpx;
|
||||
width: 100%;
|
||||
font-size: 25rpx;
|
||||
|
||||
.geek-more {
|
||||
width: 100rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 110rpx;
|
||||
|
||||
padding: 10rpx;
|
||||
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.geek-buttonGroup {
|
||||
width: 450rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
|
||||
@ -195,11 +196,8 @@ function formatNumber(num, place) {
|
||||
height: 60rpx;
|
||||
border-radius: 80rpx;
|
||||
opacity: 0.8;
|
||||
|
||||
padding: 10rpx;
|
||||
|
||||
margin-right: 10rpx;
|
||||
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
||||
@ -210,18 +208,12 @@ function formatNumber(num, place) {
|
||||
height: 60rpx;
|
||||
border-radius: 80rpx;
|
||||
opacity: 0.8;
|
||||
|
||||
padding: 10rpx;
|
||||
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
||||
color: #F25E53;
|
||||
border: 1rpx solid #F4DADA;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,12 +6,13 @@ export interface Menu {
|
||||
export interface Commodity {
|
||||
img: string,
|
||||
title: string,
|
||||
subTitle: string,
|
||||
subTitle?: string,
|
||||
price: number
|
||||
}
|
||||
|
||||
export interface CommodityOrder extends Commodity {
|
||||
shop: string,
|
||||
status: string,
|
||||
num: number
|
||||
num: number,
|
||||
label?:string
|
||||
}
|
||||
@ -33,7 +33,7 @@
|
||||
@again="modal.msg('再次购买')" @return="modal.msg('退换')" @sell="modal.msg('卖了换钱')"></geek-order>
|
||||
|
||||
<uni-section class="mb-10" title="颜色选择器" sub-title="order" type="line"></uni-section>
|
||||
<geek-color-picker ref="gk"></geek-color-picker>
|
||||
<geek-color-picker ref="gk" @confirm="getcolor"></geek-color-picker>
|
||||
<button @click="open()">打开颜色选择器</button>
|
||||
|
||||
|
||||
@ -51,8 +51,11 @@ function open() {
|
||||
//@ts-ignore
|
||||
gk.value.open()
|
||||
}
|
||||
function getcolor(color: { hex: string, rgba: { r: number, g: number, b: number, a: number } }) {
|
||||
console.log(color)
|
||||
}
|
||||
|
||||
const menus:Array<Menu> = reactive([
|
||||
const menus: Array<Menu> = reactive([
|
||||
{ icon: "/static/images/icon/rocket.png", label: '抢单' },
|
||||
{ icon: "/static/images/icon/phone.png", label: '回访' },
|
||||
{ icon: "/static/images/icon/message.png", label: '消息' },
|
||||
@ -87,7 +90,7 @@ const orderList: Array<CommodityOrder> = [
|
||||
status: '完成',
|
||||
img: '/static/images/banner/banner01.jpg',
|
||||
title: '商品1',
|
||||
subTitle: '商品1简介',
|
||||
label: '商品1简介',
|
||||
price: 100.32,
|
||||
num: 10
|
||||
},
|
||||
@ -96,7 +99,7 @@ const orderList: Array<CommodityOrder> = [
|
||||
status: '已取消',
|
||||
img: '/static/images/banner/banner03.jpg',
|
||||
title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
|
||||
subTitle: '商品3简介',
|
||||
label: '商品3简介',
|
||||
price: 2000.67,
|
||||
num: 10
|
||||
},
|
||||
@ -105,7 +108,7 @@ const orderList: Array<CommodityOrder> = [
|
||||
status: '已取消',
|
||||
img: '/static/images/banner/banner03.jpg',
|
||||
title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
|
||||
subTitle: '商品3简介',
|
||||
label: '商品3简介',
|
||||
price: 10.67,
|
||||
num: 10
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@ export default {
|
||||
tabCur: 0, //标签头下标
|
||||
topBar: 17, //导航高
|
||||
top: '180', //下拉栏位置
|
||||
scrollHeight: "600px", //数据展示体高度
|
||||
scrollHeight: "1400rpx", //数据展示体高度
|
||||
friendTrand,
|
||||
RankData,
|
||||
ProductRateData,
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<script setup>
|
||||
</script>
|
||||
<template>
|
||||
<view class="navigation">
|
||||
<view class="left">
|
||||
@ -21,16 +23,13 @@
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navigation {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 100rpx;
|
||||
border: solid 2rpx #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
@ -54,6 +53,7 @@ export default {
|
||||
.right {
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
padding-right: 10rpx;
|
||||
align-items: center;
|
||||
.btn {
|
||||
line-height: 66rpx;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user