商城页面样式修改
This commit is contained in:
parent
7369a153db
commit
d61915696c
|
|
@ -113,11 +113,17 @@
|
|||
}
|
||||
.text-wrapper {
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 26.25rpx 0;
|
||||
background-color: #f5f5dc;
|
||||
}
|
||||
.section {
|
||||
position: fixed;
|
||||
top: 75rpx;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0 121.88rpx;
|
||||
background-color: #fffef8;
|
||||
}
|
||||
|
|
@ -130,6 +136,7 @@
|
|||
height: 5.63rpx;
|
||||
}
|
||||
.list {
|
||||
margin-top: 134rpx;
|
||||
margin-bottom: 125rpx;
|
||||
padding: 18.75rpx 13.13rpx 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,76 +1,61 @@
|
|||
<template>
|
||||
<view class="flex-col page">
|
||||
<view class="flex-col">
|
||||
<view class="flex-row items-center section">
|
||||
<view class="flex-row relative page">
|
||||
<view class="flex-row items-center section pos_8">
|
||||
<text class="text">商品</text>
|
||||
<view class="flex-row section_2 ml-15">
|
||||
<view class="flex-row items-center section_2 ml-15">
|
||||
<image class="image"
|
||||
src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=348b14e68c9ce02a3b9fe870f131c4c7.png" />
|
||||
<input class="text-wrapper ml-2" placeholder="请输入想要搜索的商品" />
|
||||
src="https://ide.code.fun/api/image?token=671134c30a3d780012a6a0cb&name=9be8d37ecdad5a4ae97f3017b8b13575.png" />
|
||||
<input class="text-wrapper ml-3" placeholder="请输入内容" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center image-wrapper mt-3">
|
||||
<view class="flex-col justify-start items-center image-wrapper pos_1">
|
||||
<image class="shrink-0 image_2"
|
||||
src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=bf3dfe8c3d572943e00870d83c40b20c.png" />
|
||||
src="" />
|
||||
</view>
|
||||
<view class="flex-col justify-start section_3 pos_9">
|
||||
<view class="flex-col group">
|
||||
<view class="flex-col items-center list-item mt-5" v-for="(item, index) in sort" :key="index">
|
||||
<image class="image_3"
|
||||
:src="item.imgurl" />
|
||||
<text class="font_4 mt-3">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row relative group">
|
||||
<view class="shrink-0 section_3"></view>
|
||||
<view class="flex-col shrink-0 group_1 pos_5">
|
||||
<view class="flex-col items-center section_6 list-item_1 mt-4" v-for="(item, index) in sort"
|
||||
:key="index">
|
||||
<image class="image_3" :src="item.imgurl" />
|
||||
<text class="font_3 text_5 mt-3">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start flex-1 relative section_4">
|
||||
<view class="flex-col justify-start section_4 pos_4">
|
||||
<view class="flex-col items-start section_5">
|
||||
<text class="font_2 text_3">材料包</text>
|
||||
<text class="font text_4 mt-6">提供材料自行DIY</text>
|
||||
<text class="font_2">材料包</text>
|
||||
<text class="font_3 text_3 mt-6">提供材料自行DIY</text>
|
||||
</view>
|
||||
<view class="flex-col shrink-0 pos">
|
||||
<!-- <scroll-view style="height: 1000rpx;" scroll-y="true"> -->
|
||||
<view class="flex-row list-item mt-5" v-for="(item, index) in product_list" :key="index">
|
||||
|
||||
<image class="self-center image_4" :src="item.imgurl" />
|
||||
<view class="flex-col items-start self-center group_5">
|
||||
<text class="font_2">{{ item.product_name }}</text>
|
||||
<text class="font mt-13">{{ item.detail }}</text>
|
||||
<text class="font_4 text_7 mt-13">￥{{ item.value }}</text>
|
||||
</view>
|
||||
<view class="flex-col pos_5">
|
||||
<scroll-view scroll-y class="scrollable-content">
|
||||
<view class="flex-row section_9 list-item_2 mt-5" v-for="(item, index) in product_list" :key="index" @click="tap">
|
||||
<image class="self-center image_4"
|
||||
:src="item.imgurl" />
|
||||
<view class="flex-col items-start self-center group_3">
|
||||
<text class="font_2 text_5">{{ item.product_name }}</text>
|
||||
<text class="font_3 mt-13">{{ item.detail }}</text>
|
||||
<text class="font mt-13">￥{{ item.value }}</text>
|
||||
</view>
|
||||
<image class="self-start image_5"
|
||||
src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=806f54ff88b61d172a611e704c80a85c.png" />
|
||||
|
||||
</view>
|
||||
<!-- </scroll-view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="flex-col shrink-0 pos">
|
||||
<scroll-view style="height: 1000rpx;" scroll-y="true">
|
||||
<view class="flex-row list-item mt-5" v-for="(item, index) in product_list" :key="index">
|
||||
<image class="self-center image_4" :src="item.imgurl" />
|
||||
<view class="flex-col items-start self-center group_5">
|
||||
<text class="font_2">{{ item.product_name }}</text>
|
||||
<text class="font mt-13">{{ item.detail }}</text>
|
||||
<text class="font_4 text_7 mt-13">￥{{ item.value }}</text>
|
||||
</view>
|
||||
<image class="self-start image_5"
|
||||
src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=806f54ff88b61d172a611e704c80a85c.png" />
|
||||
:src="add_img" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import img1 from '@/pages/store-home/main/img/cailiaobao.png';
|
||||
import img2 from '@/pages/store-home/main/img/shouchiwu.png';
|
||||
import img3 from '@/pages/store-home/main/img/toushi.png';
|
||||
import img4 from '@/pages/store-home/main/img/dingzhi.png';
|
||||
import img5 from '@/pages/store-home/main/img/jifenduihuan.png';
|
||||
import product_img from '@/pages/store-home/main/img/shangpingtupian.png';
|
||||
import add_img from '@/pages/store-home/main/img/tianjia.png';
|
||||
const sort = ref([{
|
||||
name: "材料包",
|
||||
imgurl: img1
|
||||
|
|
@ -145,31 +130,47 @@
|
|||
type: "材料包",
|
||||
detail: "提供材料自行DIY"
|
||||
}]
|
||||
const tap =()=> {
|
||||
uni.navigateTo({
|
||||
url: '../../../pages/order/product-close/product-close'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scrollable-content {
|
||||
height: 56vh;
|
||||
/* 100px 是头部和底部的高度之和 */
|
||||
}
|
||||
|
||||
.ml-15 {
|
||||
margin-left: 28.13rpx;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: 5.63rpx;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 5.63rpx;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 9.38rpx;
|
||||
}
|
||||
|
||||
.mt-13 {
|
||||
margin-top: 24.38rpx;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 9.38rpx;
|
||||
}
|
||||
|
||||
.page {
|
||||
background-color: #f5f5dc;
|
||||
// height: 1413.75rpx;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section {
|
||||
|
|
@ -177,6 +178,13 @@
|
|||
background-color: #f7de98;
|
||||
}
|
||||
|
||||
.pos_8 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #c1651a;
|
||||
font-size: 37.5rpx;
|
||||
|
|
@ -185,66 +193,72 @@
|
|||
}
|
||||
|
||||
.section_2 {
|
||||
padding: 7.5rpx 30.43rpx;
|
||||
padding: 5.63rpx 15rpx 8.44rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 28.13rpx;
|
||||
height: 63.75rpx;
|
||||
width: 500.69rpx;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 48.75rpx;
|
||||
height: 48.75rpx;
|
||||
width: 50.63rpx;
|
||||
height: 50.63rpx;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
margin-right: 5.31rpx;
|
||||
margin-right: 17.42rpx;
|
||||
}
|
||||
|
||||
.font {
|
||||
font-size: 26.25rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 18rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
margin-left: 22.5rpx;
|
||||
margin-right: 24.38rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 28.13rpx;
|
||||
overflow: hidden;
|
||||
border: solid 9.38rpx #ffffff;
|
||||
}
|
||||
|
||||
.pos_1 {
|
||||
position: absolute;
|
||||
left: 22.5rpx;
|
||||
right: 24.38rpx;
|
||||
top: 118.13rpx;
|
||||
}
|
||||
|
||||
.image_2 {
|
||||
width: 91.25vw;
|
||||
height: 37.5vw;
|
||||
}
|
||||
|
||||
.group {
|
||||
position: relative;
|
||||
|
||||
border: 3px solid brown;
|
||||
margin-top: 22.5rpx;
|
||||
// height: 1000rpx;
|
||||
}
|
||||
|
||||
.section_3 {
|
||||
background-color: #FFFEF8;
|
||||
padding: 8.44rpx 5.63rpx 750rpx;
|
||||
background-color: #f7de98;
|
||||
width: 151.88rpx;
|
||||
// height: 1156.88rpx;
|
||||
}
|
||||
|
||||
.group_1 {
|
||||
width: 142.5rpx;
|
||||
}
|
||||
|
||||
.pos_5 {
|
||||
.pos_9 {
|
||||
position: absolute;
|
||||
left: 5.63rpx;
|
||||
top: 5.63rpx;
|
||||
left: 0;
|
||||
top: 440.63rpx;
|
||||
}
|
||||
|
||||
.section_6 {
|
||||
.group {
|
||||
margin: auto;
|
||||
width: 137.81rpx;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: 11.25rpx 0 9.94rpx;
|
||||
background-color: #fffef8;
|
||||
border-radius: 9.38rpx;
|
||||
}
|
||||
|
||||
.list-item_1:first-child {
|
||||
.list-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -254,71 +268,65 @@
|
|||
height: 48.75rpx;
|
||||
}
|
||||
|
||||
.font_3 {
|
||||
.font_4 {
|
||||
font-size: 30rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 28.65rpx;
|
||||
line-height: 28.26rpx;
|
||||
color: #c1651a;
|
||||
}
|
||||
|
||||
.text_5 {
|
||||
line-height: 28.26rpx;
|
||||
}
|
||||
|
||||
.section_4 {
|
||||
border: 3px solid blue;
|
||||
overflow: auto;
|
||||
margin-right: 7.5rpx;
|
||||
padding-bottom: 790.13rpx;
|
||||
padding-bottom: 879.38rpx;
|
||||
background-color: #f8e8c1;
|
||||
border-radius: 0rpx 18.75rpx 0rpx 0rpx;
|
||||
// height: 760.88rpx;
|
||||
width: 600.13rpx;
|
||||
}
|
||||
|
||||
.pos_4 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 440.63rpx;
|
||||
}
|
||||
|
||||
.section_5 {
|
||||
padding: 18.06rpx 16.24rpx 14.94rpx;
|
||||
background-color: #C1651A;
|
||||
|
||||
background-color: #fffef8;
|
||||
border-radius: 0rpx 18.75rpx 0rpx 0rpx;
|
||||
width: 598.13rpx;
|
||||
}
|
||||
|
||||
.font_2 {
|
||||
font-size: 30rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 28.65rpx;
|
||||
line-height: 28.26rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.text_3 {
|
||||
line-height: 28.26rpx;
|
||||
}
|
||||
|
||||
.font {
|
||||
.font_3 {
|
||||
font-size: 22.5rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 21.56rpx;
|
||||
color: #727272;
|
||||
}
|
||||
|
||||
.text_4 {
|
||||
.text_3 {
|
||||
line-height: 21.15rpx;
|
||||
}
|
||||
|
||||
.pos {
|
||||
.pos_5 {
|
||||
position: absolute;
|
||||
border: 3px solid red;
|
||||
// height: 500rpx;
|
||||
right: 15rpx;
|
||||
top: 99.38rpx;
|
||||
top: 543.75rpx;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: 20.63rpx 27.88rpx 22.5rpx;
|
||||
.section_9 {
|
||||
padding: 20.63rpx 22.88rpx 22.5rpx;
|
||||
background-color: #fffef8;
|
||||
border-radius: 9.38rpx;
|
||||
right: 13.13rpx;
|
||||
}
|
||||
|
||||
.list-item:first-child {
|
||||
.list-item_2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -328,27 +336,21 @@
|
|||
height: 131.25rpx;
|
||||
}
|
||||
|
||||
.group_5 {
|
||||
.group_3 {
|
||||
margin-left: 24.84rpx;
|
||||
}
|
||||
|
||||
.font_4 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 18rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.text_7 {
|
||||
-webkit-text-stroke: 1.88rpx #ff000040;
|
||||
.text_5 {
|
||||
line-height: 28.65rpx;
|
||||
}
|
||||
|
||||
.image_5 {
|
||||
margin: 75rpx 3.77rpx 0 96.71rpx;
|
||||
margin: 75rpx 5.63rpx 0 107.96rpx;
|
||||
border-radius: 9.38rpx;
|
||||
width: 56.25rpx;
|
||||
height: 56.25rpx;
|
||||
}
|
||||
|
||||
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
BIN
unpackage/dist/dev/mp-weixin/assets/tianjia.187834c9.png
vendored
Normal file
BIN
unpackage/dist/dev/mp-weixin/assets/tianjia.187834c9.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -5,6 +5,8 @@ const img3 = "/assets/toushi.6558cc23.png";
|
|||
const img4 = "/assets/dingzhi.d6614f9f.png";
|
||||
const img5 = "/assets/jifenduihuan.a1c23524.png";
|
||||
const product_img = "/assets/shangpingtupian.ec8c0440.png";
|
||||
const add_img = "/assets/tianjia.187834c9.png";
|
||||
exports.add_img = add_img;
|
||||
exports.img1 = img1;
|
||||
exports.img2 = img2;
|
||||
exports.img3 = img3;
|
||||
|
|
|
|||
93
unpackage/dist/dev/mp-weixin/common/vendor.js
vendored
93
unpackage/dist/dev/mp-weixin/common/vendor.js
vendored
|
|
@ -6568,6 +6568,95 @@ function getCreateApp() {
|
|||
return my[method];
|
||||
}
|
||||
}
|
||||
function vOn(value, key) {
|
||||
const instance = getCurrentInstance();
|
||||
const ctx = instance.ctx;
|
||||
const extraKey = typeof key !== "undefined" && (ctx.$mpPlatform === "mp-weixin" || ctx.$mpPlatform === "mp-qq" || ctx.$mpPlatform === "mp-xhs") && (isString(key) || typeof key === "number") ? "_" + key : "";
|
||||
const name = "e" + instance.$ei++ + extraKey;
|
||||
const mpInstance = ctx.$scope;
|
||||
if (!value) {
|
||||
delete mpInstance[name];
|
||||
return name;
|
||||
}
|
||||
const existingInvoker = mpInstance[name];
|
||||
if (existingInvoker) {
|
||||
existingInvoker.value = value;
|
||||
} else {
|
||||
mpInstance[name] = createInvoker(value, instance);
|
||||
}
|
||||
return name;
|
||||
}
|
||||
function createInvoker(initialValue, instance) {
|
||||
const invoker = (e2) => {
|
||||
patchMPEvent(e2);
|
||||
let args = [e2];
|
||||
if (e2.detail && e2.detail.__args__) {
|
||||
args = e2.detail.__args__;
|
||||
}
|
||||
const eventValue = invoker.value;
|
||||
const invoke = () => callWithAsyncErrorHandling(patchStopImmediatePropagation(e2, eventValue), instance, 5, args);
|
||||
const eventTarget = e2.target;
|
||||
const eventSync = eventTarget ? eventTarget.dataset ? String(eventTarget.dataset.eventsync) === "true" : false : false;
|
||||
if (bubbles.includes(e2.type) && !eventSync) {
|
||||
setTimeout(invoke);
|
||||
} else {
|
||||
const res = invoke();
|
||||
if (e2.type === "input" && (isArray(res) || isPromise(res))) {
|
||||
return;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
};
|
||||
invoker.value = initialValue;
|
||||
return invoker;
|
||||
}
|
||||
const bubbles = [
|
||||
// touch事件暂不做延迟，否则在 Android 上会影响性能，比如一些拖拽跟手手势等
|
||||
// 'touchstart',
|
||||
// 'touchmove',
|
||||
// 'touchcancel',
|
||||
// 'touchend',
|
||||
"tap",
|
||||
"longpress",
|
||||
"longtap",
|
||||
"transitionend",
|
||||
"animationstart",
|
||||
"animationiteration",
|
||||
"animationend",
|
||||
"touchforcechange"
|
||||
];
|
||||
function patchMPEvent(event) {
|
||||
if (event.type && event.target) {
|
||||
event.preventDefault = NOOP;
|
||||
event.stopPropagation = NOOP;
|
||||
event.stopImmediatePropagation = NOOP;
|
||||
if (!hasOwn(event, "detail")) {
|
||||
event.detail = {};
|
||||
}
|
||||
if (hasOwn(event, "markerId")) {
|
||||
event.detail = typeof event.detail === "object" ? event.detail : {};
|
||||
event.detail.markerId = event.markerId;
|
||||
}
|
||||
if (isPlainObject(event.detail) && hasOwn(event.detail, "checked") && !hasOwn(event.detail, "value")) {
|
||||
event.detail.value = event.detail.checked;
|
||||
}
|
||||
if (isPlainObject(event.detail)) {
|
||||
event.target = extend({}, event.target, event.detail);
|
||||
}
|
||||
}
|
||||
}
|
||||
function patchStopImmediatePropagation(e2, value) {
|
||||
if (isArray(value)) {
|
||||
const originalStop = e2.stopImmediatePropagation;
|
||||
e2.stopImmediatePropagation = () => {
|
||||
originalStop && originalStop.call(e2);
|
||||
e2._stopped = true;
|
||||
};
|
||||
return value.map((fn) => (e3) => !e3._stopped && fn(e3));
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
function vFor(source, renderItem) {
|
||||
let ret;
|
||||
if (isArray(source) || isString(source)) {
|
||||
|
|
@ -6600,6 +6689,7 @@ function vFor(source, renderItem) {
|
|||
}
|
||||
return ret;
|
||||
}
|
||||
const o = (value, key) => vOn(value, key);
|
||||
const f = (source, renderItem) => vFor(source, renderItem);
|
||||
const t = (val) => toDisplayString(val);
|
||||
function createApp$1(rootComponent, rootProps = null) {
|
||||
|
|
@ -7436,5 +7526,8 @@ const createSubpackageApp = initCreateSubpackageApp();
|
|||
exports._export_sfc = _export_sfc;
|
||||
exports.createSSRApp = createSSRApp;
|
||||
exports.f = f;
|
||||
exports.index = index;
|
||||
exports.o = o;
|
||||
exports.ref = ref;
|
||||
exports.t = t;
|
||||
exports.unref = unref;
|
||||
|
|
|
|||
|
|
@ -416,10 +416,17 @@ text.data-v-641af6de {
|
|||
}
|
||||
.text-wrapper.data-v-641af6de {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 26.25rpx 0;
|
||||
background-color: #f5f5dc;
|
||||
}
|
||||
.section.data-v-641af6de {
|
||||
position: fixed;
|
||||
top: 75rpx;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0 121.88rpx;
|
||||
background-color: #fffef8;
|
||||
}
|
||||
|
|
@ -432,6 +439,7 @@ text.data-v-641af6de {
|
|||
height: 5.63rpx;
|
||||
}
|
||||
.list.data-v-641af6de {
|
||||
margin-top: 134rpx;
|
||||
margin-bottom: 125rpx;
|
||||
padding: 18.75rpx 13.13rpx 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,6 +76,11 @@ const _sfc_main = {
|
|||
imgurl: common_assets.product_img
|
||||
}
|
||||
]);
|
||||
const tap = () => {
|
||||
common_vendor.index.navigateTo({
|
||||
url: "../../../pages/order/product-close/product-close"
|
||||
});
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
return {
|
||||
a: common_vendor.f(sort.value, (item, index, i0) => {
|
||||
|
|
@ -91,9 +96,11 @@ const _sfc_main = {
|
|||
b: common_vendor.t(item.product_name),
|
||||
c: common_vendor.t(item.detail),
|
||||
d: common_vendor.t(item.value),
|
||||
e: index
|
||||
e: index,
|
||||
f: common_vendor.o(tap, index)
|
||||
};
|
||||
})
|
||||
}),
|
||||
c: common_vendor.unref(common_assets.add_img)
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<view class="flex-col page data-v-7e3c386d"><view class="flex-col data-v-7e3c386d"><view class="flex-row items-center section data-v-7e3c386d"><text class="text data-v-7e3c386d">商品</text><view class="flex-row section_2 ml-15 data-v-7e3c386d"><image class="image data-v-7e3c386d" src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=348b14e68c9ce02a3b9fe870f131c4c7.png"/><input class="text-wrapper ml-2 data-v-7e3c386d" placeholder="请输入想要搜索的商品"/></view></view><view class="flex-col justify-start items-center image-wrapper mt-3 data-v-7e3c386d"><image class="shrink-0 image_2 data-v-7e3c386d" src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=bf3dfe8c3d572943e00870d83c40b20c.png"/></view></view><view class="flex-row relative group data-v-7e3c386d"><view class="shrink-0 section_3 data-v-7e3c386d"></view><view class="flex-col shrink-0 group_1 pos_5 data-v-7e3c386d"><view wx:for="{{a}}" wx:for-item="item" wx:key="c" class="flex-col items-center section_6 list-item_1 mt-4 data-v-7e3c386d"><image class="image_3 data-v-7e3c386d" src="{{item.a}}"/><text class="font_3 text_5 mt-3 data-v-7e3c386d">{{item.b}}</text></view></view><view class="flex-col justify-start flex-1 relative section_4 data-v-7e3c386d"><view class="flex-col items-start section_5 data-v-7e3c386d"><text class="font_2 text_3 data-v-7e3c386d">材料包</text><text class="font text_4 mt-6 data-v-7e3c386d">提供材料自行DIY</text></view><view class="flex-col shrink-0 pos data-v-7e3c386d"><view wx:for="{{b}}" wx:for-item="item" wx:key="e" class="flex-row list-item mt-5 data-v-7e3c386d"><image class="self-center image_4 data-v-7e3c386d" src="{{item.a}}"/><view class="flex-col items-start self-center group_5 data-v-7e3c386d"><text class="font_2 data-v-7e3c386d">{{item.b}}</text><text class="font mt-13 data-v-7e3c386d">{{item.c}}</text><text class="font_4 text_7 mt-13 data-v-7e3c386d">￥{{item.d}}</text></view><image class="self-start image_5 data-v-7e3c386d" src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=806f54ff88b61d172a611e704c80a85c.png"/></view></view></view></view></view>
|
||||
<view class="flex-row relative page data-v-7e3c386d"><view class="flex-row items-center section pos_8 data-v-7e3c386d"><text class="text data-v-7e3c386d">商品</text><view class="flex-row items-center section_2 ml-15 data-v-7e3c386d"><image class="image data-v-7e3c386d" src="https://ide.code.fun/api/image?token=671134c30a3d780012a6a0cb&name=9be8d37ecdad5a4ae97f3017b8b13575.png"/><input class="text-wrapper ml-3 data-v-7e3c386d" placeholder="请输入内容"/></view></view><view class="flex-col justify-start items-center image-wrapper pos_1 data-v-7e3c386d"><image class="shrink-0 image_2 data-v-7e3c386d" src="{{''}}"/></view><view class="flex-col justify-start section_3 pos_9 data-v-7e3c386d"><view class="flex-col group data-v-7e3c386d"><view wx:for="{{a}}" wx:for-item="item" wx:key="c" class="flex-col items-center list-item mt-5 data-v-7e3c386d"><image class="image_3 data-v-7e3c386d" src="{{item.a}}"/><text class="font_4 mt-3 data-v-7e3c386d">{{item.b}}</text></view></view></view><view class="flex-col justify-start section_4 pos_4 data-v-7e3c386d"><view class="flex-col items-start section_5 data-v-7e3c386d"><text class="font_2 data-v-7e3c386d">材料包</text><text class="font_3 text_3 mt-6 data-v-7e3c386d">提供材料自行DIY</text></view></view><view class="flex-col pos_5 data-v-7e3c386d"><scroll-view scroll-y class="scrollable-content data-v-7e3c386d"><view wx:for="{{b}}" wx:for-item="item" wx:key="e" class="flex-row section_9 list-item_2 mt-5 data-v-7e3c386d" bindtap="{{item.f}}"><image class="self-center image_4 data-v-7e3c386d" src="{{item.a}}"/><view class="flex-col items-start self-center group_3 data-v-7e3c386d"><text class="font_2 text_5 data-v-7e3c386d">{{item.b}}</text><text class="font_3 mt-13 data-v-7e3c386d">{{item.c}}</text><text class="font mt-13 data-v-7e3c386d">￥{{item.d}}</text></view><image class="self-start image_5 data-v-7e3c386d" src="{{c}}"/></view></scroll-view></view></view>
|
||||
|
|
@ -401,29 +401,43 @@ text.data-v-7e3c386d {
|
|||
.mt-100.data-v-7e3c386d {
|
||||
margin-top: 187.5rpx;
|
||||
}
|
||||
.scrollable-content.data-v-7e3c386d {
|
||||
height: 56vh;
|
||||
/* 100px 是头部和底部的高度之和 */
|
||||
}
|
||||
.ml-15.data-v-7e3c386d {
|
||||
margin-left: 28.13rpx;
|
||||
}
|
||||
.ml-3.data-v-7e3c386d {
|
||||
margin-left: 5.63rpx;
|
||||
}
|
||||
.mt-3.data-v-7e3c386d {
|
||||
margin-top: 5.63rpx;
|
||||
}
|
||||
.mt-5.data-v-7e3c386d {
|
||||
margin-top: 9.38rpx;
|
||||
}
|
||||
.mt-13.data-v-7e3c386d {
|
||||
margin-top: 24.38rpx;
|
||||
}
|
||||
.mt-5.data-v-7e3c386d {
|
||||
margin-top: 9.38rpx;
|
||||
}
|
||||
.page.data-v-7e3c386d {
|
||||
background-color: #f5f5dc;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.section.data-v-7e3c386d {
|
||||
padding: 22.5rpx 39.28rpx 16.88rpx;
|
||||
background-color: #f7de98;
|
||||
}
|
||||
.pos_8.data-v-7e3c386d {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.text.data-v-7e3c386d {
|
||||
color: #c1651a;
|
||||
font-size: 37.5rpx;
|
||||
|
|
@ -431,53 +445,61 @@ text.data-v-7e3c386d {
|
|||
line-height: 36.19rpx;
|
||||
}
|
||||
.section_2.data-v-7e3c386d {
|
||||
padding: 7.5rpx 30.43rpx;
|
||||
padding: 5.63rpx 15rpx 8.44rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 28.13rpx;
|
||||
height: 63.75rpx;
|
||||
width: 500.69rpx;
|
||||
}
|
||||
.image.data-v-7e3c386d {
|
||||
width: 48.75rpx;
|
||||
height: 48.75rpx;
|
||||
width: 50.63rpx;
|
||||
height: 50.63rpx;
|
||||
}
|
||||
.text-wrapper.data-v-7e3c386d {
|
||||
margin-right: 5.31rpx;
|
||||
margin-right: 17.42rpx;
|
||||
}
|
||||
.font.data-v-7e3c386d {
|
||||
font-size: 26.25rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 18rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
.image-wrapper.data-v-7e3c386d {
|
||||
margin-left: 22.5rpx;
|
||||
margin-right: 24.38rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 28.13rpx;
|
||||
overflow: hidden;
|
||||
border: solid 9.38rpx #ffffff;
|
||||
}
|
||||
.pos_1.data-v-7e3c386d {
|
||||
position: absolute;
|
||||
left: 22.5rpx;
|
||||
right: 24.38rpx;
|
||||
top: 118.13rpx;
|
||||
}
|
||||
.image_2.data-v-7e3c386d {
|
||||
width: 91.25vw;
|
||||
height: 37.5vw;
|
||||
}
|
||||
.group.data-v-7e3c386d {
|
||||
position: relative;
|
||||
border: 3px solid brown;
|
||||
margin-top: 22.5rpx;
|
||||
}
|
||||
.section_3.data-v-7e3c386d {
|
||||
background-color: #FFFEF8;
|
||||
padding: 8.44rpx 5.63rpx 750rpx;
|
||||
background-color: #f7de98;
|
||||
width: 151.88rpx;
|
||||
}
|
||||
.group_1.data-v-7e3c386d {
|
||||
width: 142.5rpx;
|
||||
}
|
||||
.pos_5.data-v-7e3c386d {
|
||||
.pos_9.data-v-7e3c386d {
|
||||
position: absolute;
|
||||
left: 5.63rpx;
|
||||
top: 5.63rpx;
|
||||
left: 0;
|
||||
top: 440.63rpx;
|
||||
}
|
||||
.section_6.data-v-7e3c386d {
|
||||
.group.data-v-7e3c386d {
|
||||
margin: auto;
|
||||
width: 137.81rpx;
|
||||
}
|
||||
.list-item.data-v-7e3c386d {
|
||||
padding: 11.25rpx 0 9.94rpx;
|
||||
background-color: #fffef8;
|
||||
border-radius: 9.38rpx;
|
||||
}
|
||||
.list-item_1.data-v-7e3c386d:first-child {
|
||||
.list-item.data-v-7e3c386d:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.image_3.data-v-7e3c386d {
|
||||
|
|
@ -485,58 +507,56 @@ text.data-v-7e3c386d {
|
|||
width: 48.75rpx;
|
||||
height: 48.75rpx;
|
||||
}
|
||||
.font_3.data-v-7e3c386d {
|
||||
.font_4.data-v-7e3c386d {
|
||||
font-size: 30rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 28.65rpx;
|
||||
line-height: 28.26rpx;
|
||||
color: #c1651a;
|
||||
}
|
||||
.text_5.data-v-7e3c386d {
|
||||
line-height: 28.26rpx;
|
||||
}
|
||||
.section_4.data-v-7e3c386d {
|
||||
border: 3px solid blue;
|
||||
overflow: auto;
|
||||
margin-right: 7.5rpx;
|
||||
padding-bottom: 790.13rpx;
|
||||
padding-bottom: 879.38rpx;
|
||||
background-color: #f8e8c1;
|
||||
border-radius: 0rpx 18.75rpx 0rpx 0rpx;
|
||||
width: 600.13rpx;
|
||||
}
|
||||
.pos_4.data-v-7e3c386d {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 440.63rpx;
|
||||
}
|
||||
.section_5.data-v-7e3c386d {
|
||||
padding: 18.06rpx 16.24rpx 14.94rpx;
|
||||
background-color: #C1651A;
|
||||
background-color: #fffef8;
|
||||
border-radius: 0rpx 18.75rpx 0rpx 0rpx;
|
||||
width: 598.13rpx;
|
||||
}
|
||||
.font_2.data-v-7e3c386d {
|
||||
font-size: 30rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 28.65rpx;
|
||||
line-height: 28.26rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.text_3.data-v-7e3c386d {
|
||||
line-height: 28.26rpx;
|
||||
}
|
||||
.font.data-v-7e3c386d {
|
||||
.font_3.data-v-7e3c386d {
|
||||
font-size: 22.5rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 21.56rpx;
|
||||
color: #727272;
|
||||
}
|
||||
.text_4.data-v-7e3c386d {
|
||||
.text_3.data-v-7e3c386d {
|
||||
line-height: 21.15rpx;
|
||||
}
|
||||
.pos.data-v-7e3c386d {
|
||||
.pos_5.data-v-7e3c386d {
|
||||
position: absolute;
|
||||
border: 3px solid red;
|
||||
right: 15rpx;
|
||||
top: 99.38rpx;
|
||||
top: 543.75rpx;
|
||||
}
|
||||
.list-item.data-v-7e3c386d {
|
||||
padding: 20.63rpx 27.88rpx 22.5rpx;
|
||||
.section_9.data-v-7e3c386d {
|
||||
padding: 20.63rpx 22.88rpx 22.5rpx;
|
||||
background-color: #fffef8;
|
||||
border-radius: 9.38rpx;
|
||||
right: 13.13rpx;
|
||||
}
|
||||
.list-item.data-v-7e3c386d:first-child {
|
||||
.list-item_2.data-v-7e3c386d:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.image_4.data-v-7e3c386d {
|
||||
|
|
@ -544,20 +564,14 @@ text.data-v-7e3c386d {
|
|||
width: 131.25rpx;
|
||||
height: 131.25rpx;
|
||||
}
|
||||
.group_5.data-v-7e3c386d {
|
||||
.group_3.data-v-7e3c386d {
|
||||
margin-left: 24.84rpx;
|
||||
}
|
||||
.font_4.data-v-7e3c386d {
|
||||
font-size: 26.25rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 18rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
.text_7.data-v-7e3c386d {
|
||||
-webkit-text-stroke: 1.88rpx #ff000040;
|
||||
.text_5.data-v-7e3c386d {
|
||||
line-height: 28.65rpx;
|
||||
}
|
||||
.image_5.data-v-7e3c386d {
|
||||
margin: 75rpx 3.77rpx 0 96.71rpx;
|
||||
margin: 75rpx 5.63rpx 0 107.96rpx;
|
||||
border-radius: 9.38rpx;
|
||||
width: 56.25rpx;
|
||||
height: 56.25rpx;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user