qniao
/
paper-shopkeeper-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

bug

devlop
邓雄飞 4 years ago
parent
9a26b44db5
commit
e3ceea06d6
4 changed files with 347 additions and 359 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      components/bussiness-components/packingStationItem.vue
  2. 28
      components/qn-map/qn-map.nvue
  3. 2
      pages/add-user/index.vue
  4. 672
      pages/client/index.nvue

4
components/bussiness-components/packingStationItem.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<view class="packing-area"> <view class="packing-area">
<view class="info" @tap="goDetail"> <view class="info" @tap="goDetail">
<image class="image" :src="info.enterpriseLogo || '/static/imgs/client-default.png'"></image>
<image class="image" :src="info.enterpriseLogo || '/static/imgs/client/client-default.png'"></image>
<view class="content"> <view class="content">
<view class="title"> <view class="title">
<text class="text" style="width: 410rpx">{{ info.enterpriseName }}123123123</text>
<text class="text" style="width: 410rpx">{{ info.enterpriseName }}</text>
<image <image
class="icon" class="icon"
:src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'" :src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"

28
components/qn-map/qn-map.nvue
View File

@ -45,19 +45,17 @@ export default {
}, },
mounted() { mounted() {
this.mapContext = uni.createMapContext('qnMap', this) this.mapContext = uni.createMapContext('qnMap', this)
this.mapContext.onstatuschanged = function (e) {
console('change:', e)
}
console.log('mapContetxt:', this.mapContext.onstatuschanged)
// this.mapContext.onstatuschanged = function (e) {
// console('change:', e)
// }
}, },
watch: { watch: {
// 只监听items一层变化 // 只监听items一层变化
items(val) { items(val) {
console.log('val:', val)
this.markers = val.map((item) => {
return this.causeMarker(item)
this.markers = val.map((item,index) => {
return this.causeMarker(item,index)
}) })
console.log('res:', this.markers)
console.log('this.marker:',this.markers)
this.mapContext.addMarkers({ this.mapContext.addMarkers({
markers: this.markers, markers: this.markers,
clear: true, clear: true,
@ -72,13 +70,13 @@ export default {
}, },
methods: { methods: {
// 生成markers // 生成markers
causeMarker(item) {
causeMarker(item,index) {
let result = {} let result = {}
if (this.scale >= 14) { if (this.scale >= 14) {
result = { result = {
latitude: item.latitude - 0, latitude: item.latitude - 0,
longitude: item.longitude - 0, longitude: item.longitude - 0,
id: item.enterpriseId,
id: index,
iconPath: `/static/imgs/client/location-${item.whetherCooperation ? 'red' : 'blue'}.png`, iconPath: `/static/imgs/client/location-${item.whetherCooperation ? 'red' : 'blue'}.png`,
width: 22, width: 22,
height: 26, height: 26,
@ -115,12 +113,13 @@ export default {
this.centerPoint.latitude = this.location.latitude this.centerPoint.latitude = this.location.latitude
} }
if (this.items.length > 0) { if (this.items.length > 0) {
this.markers = this.items.map((item) => {
return this.causeMarker(item)
this.markers = this.items.map((item,index) => {
return this.causeMarker(item,index)
}) })
} }
}, },
labeltap(e) { labeltap(e) {
console.log('e tap:',e)
this.$emit('labeltap', e.detail.markerId) this.$emit('labeltap', e.detail.markerId)
if (this.selectedId == e.detail.markerId) { if (this.selectedId == e.detail.markerId) {
return return
@ -128,10 +127,8 @@ export default {
this.selectedId = e.detail.markerId this.selectedId = e.detail.markerId
}, },
dragMap() { dragMap() {
console.log('drag begin')
this.mapContext.getCenterLocation({ this.mapContext.getCenterLocation({
success: (res) => { success: (res) => {
console.log('dragMap success:', res)
// 抛出移动事件 // 抛出移动事件
this.$emit('dragMap', { this.$emit('dragMap', {
longitude: res.longitude, longitude: res.longitude,
@ -150,7 +147,6 @@ export default {
this.mapContext.getScale({ this.mapContext.getScale({
success: (res) => { success: (res) => {
this.scale = Math.ceil(res.scale) this.scale = Math.ceil(res.scale)
console.log('scale:', this.scale)
// 抛出缩放事件 // 抛出缩放事件
this.$emit('scaleMap', { this.$emit('scaleMap', {
longitude: this.centerPoint.longitude, longitude: this.centerPoint.longitude,
@ -165,7 +161,7 @@ export default {
clearTimeout(this.timer) clearTimeout(this.timer)
this.timer = null this.timer = null
} }
console.log('e timer after:', e)
// ios使用e.detail.causedBy ; andriod使用e.causedBy
let eventName = e.causedBy || e.detail.causedBy let eventName = e.causedBy || e.detail.causedBy
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
switch (eventName) { switch (eventName) {

2
pages/add-user/index.vue
View File

@ -289,11 +289,9 @@ const validateFields = [
'locProvinceId', 'locProvinceId',
'locCityId', 'locCityId',
'locDistrictId', 'locDistrictId',
'locStreetId',
'locProvinceName', 'locProvinceName',
'locCityName', 'locCityName',
'locDistrictName', 'locDistrictName',
'locStreetName',
'locDetail', 'locDetail',
'legalPersonIdCardNo', 'legalPersonIdCardNo',
'legalPersonIdCardFrontImg', 'legalPersonIdCardFrontImg',

672
pages/client/index.nvue
View File

@ -1,62 +1,54 @@
<template> <template>
<view class="content">
<uni-nav-bar :fixed="true" color="#ffffff" background-color="#ffffff" :status-bar="true">
<view slot="left"><text class="nav-title">客户</text></view>
<view class="nav-search" @click="goSearch">
<image class="search-icon" src="/static/imgs/client/search-icon.png" />
<text class="search-text">输入客户名称试试</text>
</view>
<view slot="right">
<view v-if="hasLogin">
<image @click="goAddUser" style="width: 40rpx; height: 40rpx" src="/static/imgs/client/user-icon.png"></image>
</view>
<view v-else><text class="nav-login" @click="goLogin">登录</text></view>
</view>
</uni-nav-bar>
<div class="map_area">
<qn-map ref="qnMap" :location="location" :items="packingList" @dragMap="mapChange" @scaleMap="mapChange" @reset="mapChange" @labeltap="showInfo"></qn-map>
<!-- 元素放在map下面才能展示 -->
<cover-view class="enquiry-area" v-if="enquiryList && enquiryList.length > 0 && !isClosed">
<view class="enquiry-header">
<view class="notice">
<image style="width: 32rpx; height: 32rpx" src="/static/imgs/client/horn-icon.png"></image>
<text class="notice_title">【新的询价单】</text>
</view>
<image style="width: 24rpx; height: 24rpx" @click="closeNotice" src="/static/imgs/client/close-icon.png"></image>
</view>
<view class="notice-content">
<view class="animation-area">
<view class="enquiry-content" :style="transitionStyle">
<view v-for="item in enquiryList" :key="item.id" class="enquiry-item">
<view>
<text class="production">{{ item.quotationPaperDetailsDtos[0].productName }}</text>
</view>
<view>
<text class="production">{{ getProductionInfo(item) }}</text>
</view>
</view>
</view>
</view>
<view class="enquiry-submit">
<text class="text">去报价</text>
<image style="width: 32rpx; height: 32rpx" src="/static/imgs/client/next-icon.png"></image>
</view>
</view>
</cover-view>
<cover-view class="list-button" @click="showList">
<image style="width: 84rpx; height: 84rpx" src="/static/imgs/client/list-button.png"></image>
</cover-view>
<cover-view class="locate-button" @click="locatePosition">
<image style="width: 84rpx; height: 84rpx" src="/static/imgs/client/locate-button.png"></image>
</cover-view>
<cover-view v-if="hasSelected" class="selected-company">
<view class="image-area">
<image class="image" src="/static/imgs/client/down-arrow-icon.png" @click="hideInfo"></image>
</view>
<view style="width: 750rpx"><packing-station-item :info="selectedCompany" /></view>
</cover-view>
</div>
</view>
<view class="content">
<uni-nav-bar :fixed="true" color="#ffffff" background-color="#ffffff" :status-bar="true">
<view slot="left"><text class="nav-title">客户</text></view>
<view class="nav-search" @click="goSearch">
<image class="search-icon" src="/static/imgs/client/search-icon.png" />
<text class="search-text">输入客户名称试试</text>
</view>
<view slot="right">
<view v-if="hasLogin"><image @click="goAddUser" style="width: 40rpx; height: 40rpx" src="/static/imgs/client/user-icon.png"></image></view>
<view v-else><text class="nav-login" @click="goLogin">登录</text></view>
</view>
</uni-nav-bar>
<div class="map_area">
<qn-map ref="qnMap" :location="location" :items="packingList" @dragMap="mapChange" @scaleMap="mapChange" @reset="mapChange" @labeltap="showInfo"></qn-map>
<!-- 元素放在map下面才能展示 -->
<cover-view class="enquiry-area" v-if="enquiryList && enquiryList.length > 0 && !isClosed">
<view class="enquiry-header">
<view class="notice">
<image style="width: 32rpx; height: 32rpx" src="/static/imgs/client/horn-icon.png"></image>
<text class="notice_title">【新的询价单】</text>
</view>
<image style="width: 24rpx; height: 24rpx" @click="closeNotice" src="/static/imgs/client/close-icon.png"></image>
</view>
<view class="notice-content">
<view class="animation-area">
<view class="enquiry-content" :style="transitionStyle">
<view v-for="item in enquiryList" :key="item.id" class="enquiry-item">
<view>
<text class="production">{{ item.quotationPaperDetailsDtos[0].productName }}</text>
</view>
<view>
<text class="production">{{ getProductionInfo(item) }}</text>
</view>
</view>
</view>
</view>
<view class="enquiry-submit">
<text class="text">去报价</text>
<image style="width: 32rpx; height: 32rpx" src="/static/imgs/client/next-icon.png"></image>
</view>
</view>
</cover-view>
<cover-view class="list-button" @click="showList"><image style="width: 84rpx; height: 84rpx" src="/static/imgs/client/list-button.png"></image></cover-view>
<cover-view class="locate-button" @click="locatePosition"><image style="width: 84rpx; height: 84rpx" src="/static/imgs/client/locate-button.png"></image></cover-view>
<cover-view v-if="hasSelected" class="selected-company">
<view class="image-area"><image class="image" src="/static/imgs/client/down-arrow-icon.png" @click="hideInfo"></image></view>
<view style="width: 750rpx"><packing-station-item :info="selectedCompany" /></view>
</cover-view>
</div>
</view>
</template> </template>
<script> <script>
@ -66,312 +58,314 @@ import qnMap from '@/components/qn-map/qn-map.nvue'
import packingStationItem from '@/components/bussiness-components/packingStationItem.vue' import packingStationItem from '@/components/bussiness-components/packingStationItem.vue'
import { getMapCompanyList, getInquiryList, getCompanyInfo } from '@/apis/clientApi' import { getMapCompanyList, getInquiryList, getCompanyInfo } from '@/apis/clientApi'
export default { export default {
components: { qnMap, packingStationItem },
data() {
return {
location: {
latitude: 23.12616,
longitude: 113.38466
},
listParam: {
latitude: 23.12616,
longitude: 113.38466,
km: 5
},
transitionTimer: null,
curIndex: 0,
packingList: [],
enquiryList: [],
isClosed: false,
hasSelected: false,
selectedCompany: undefined
}
},
methods: {
mapChange(data) {
let params = {
cooperationState: 0,
km: 5,
latitude: data.latitude,
longitude: data.longitude,
size: 100
}
let diff = Math.ceil(Math.abs(data.scale - 14) / 2)
params.km = params.km + diff * 10
params.size = params.size + diff * 100
this.listParam.latitude = data.latitude
this.listParam.longitude = data.longitude
this.listParam.km = params.km
this.getPackingList(params)
},
showList() {
go2('client-list', { longitude: this.listParam.longitude, latitude: this.listParam.latitude, km: this.listParam.km })
},
goSearch() {
go2('search')
},
goLogin() {
go2('login')
},
goAddUser() {
go2('add-user')
},
hideInfo() {
this.hasSelected = false
},
showInfo(id) {
getCompanyInfo({ enterpriseId: id }).then((res) => {
if (res) {
this.selectedCompany = res
this.hasSelected = true
}
})
},
locatePosition() {
uni.getLocation({
// type: 'gcj02',
type: 'wgs84',
success: (res) => {
console.log('location success', res)
components: { qnMap, packingStationItem },
data() {
return {
location: {
latitude: 23.12616,
longitude: 113.38466
},
listParam: {
latitude: 23.12616,
longitude: 113.38466,
km: 5
},
transitionTimer: null,
curIndex: 0,
packingList: [],
enquiryList: [],
isClosed: false,
hasSelected: false,
selectedCompany: undefined
}
},
methods: {
mapChange(data) {
let params = {
cooperationState: 0,
km: 5,
latitude: data.latitude,
longitude: data.longitude,
size: 100
}
let diff = Math.ceil(Math.abs(data.scale - 14) / 2)
params.km = params.km + diff * 10
params.size = params.size + diff * 100
this.listParam.latitude = data.latitude
this.listParam.longitude = data.longitude
this.listParam.km = params.km
this.getPackingList(params)
},
showList() {
go2('client-list', { longitude: this.listParam.longitude, latitude: this.listParam.latitude, km: this.listParam.km })
},
goSearch() {
go2('search')
},
goLogin() {
go2('login')
},
goAddUser() {
go2('add-user')
},
hideInfo() {
this.hasSelected = false
},
showInfo(index) {
console.log('index:', index)
let id = this.packingList[index].enterpriseId
getCompanyInfo({ enterpriseId: id }).then(res => {
if (res) {
this.selectedCompany = res
this.hasSelected = true
}
})
},
locatePosition() {
uni.getLocation({
// type: 'gcj02',
type: 'wgs84',
success: res => {
console.log('location success', res)
let result = wgs84togcj02(res.latitude, res.longitude) let result = wgs84togcj02(res.latitude, res.longitude)
console.log('result:',result)
const { lat, lon } = result
this.$refs.qnMap.moveTo({ latitude: lat, longitude: lon })
},
fail: (err) => {
uni.showToast({
icon: 'error',
title: '定位失败:' + err.code
})
}
})
},
getProductionInfo(item) {
let res = []
item.quotationPaperDetailsDtos[0].paperName && res.push(item.quotationPaperDetailsDtos[0].paperName)
item.quotationPaperDetailsDtos[0].brandName && res.push(item.quotationPaperDetailsDtos[0].brandName)
item.quotationPaperDetailsDtos[0].gramWeight && res.push(item.quotationPaperDetailsDtos[0].gramWeight + 'g')
item.quotationPaperDetailsDtos[0].width &&
item.quotationPaperDetailsDtos[0].length &&
res.push(item.quotationPaperDetailsDtos[0].width + '*' + item.quotationPaperDetailsDtos[0].length)
item.quotationPaperDetailsDtos[0].quantity && res.push(item.quotationPaperDetailsDtos[0].quantity + '张')
return res.join('/')
},
getPackingList(params) {
getMapCompanyList({
cooperationState: params.cooperationState,
km: params.km,
latitude: params.latitude,
longitude: params.longitude,
size: params.size
}).then((res) => {
if (res) {
this.packingList = res
}
})
},
closeNotice() {
this.isClosed = true
if (this.transitionTimer) {
clearInterval(this.transitionTimer)
this.transitionTimer = null
}
}
},
computed: {
hasLogin() {
return this.$store.state.qnToken != ''
},
transitionStyle() {
return `transform: translateY(-${this.curIndex * 80}rpx)`
}
},
created() {
// this.locatePosition()
getMapCompanyList({
cooperationState: 0,
km: 5,
latitude: this.location.latitude,
longitude: this.location.longitude,
size: 100
}).then((res) => {
if (res) {
this.packingList = res
}
})
},
onHide() {
clearInterval(this.transitionTimer)
this.transitionTimer = null
},
onShow() {
const token = this.$store.state.qnToken
if (token) {
getInquiryList({ pageNum: 1, pageSize: 10 }).then((res) => {
if (res) {
this.enquiryList = res.records
if (this.enquiryList.length > 1 && !this.isClosed) {
this.transitionTimer = setInterval(() => {
this.curIndex == this.enquiryList.length - 1 ? (this.curIndex = 0) : this.curIndex++
}, 3000)
}
}
})
}
}
console.log('result:', result)
const { lat, lon } = result
this.$refs.qnMap.moveTo({ latitude: lat, longitude: lon })
},
fail: err => {
uni.showToast({
icon: 'error',
title: '定位失败:' + err.code
})
}
})
},
getProductionInfo(item) {
let res = []
item.quotationPaperDetailsDtos[0].paperName && res.push(item.quotationPaperDetailsDtos[0].paperName)
item.quotationPaperDetailsDtos[0].brandName && res.push(item.quotationPaperDetailsDtos[0].brandName)
item.quotationPaperDetailsDtos[0].gramWeight && res.push(item.quotationPaperDetailsDtos[0].gramWeight + 'g')
item.quotationPaperDetailsDtos[0].width &&
item.quotationPaperDetailsDtos[0].length &&
res.push(item.quotationPaperDetailsDtos[0].width + '*' + item.quotationPaperDetailsDtos[0].length)
item.quotationPaperDetailsDtos[0].quantity && res.push(item.quotationPaperDetailsDtos[0].quantity + '张')
return res.join('/')
},
getPackingList(params) {
getMapCompanyList({
cooperationState: params.cooperationState,
km: params.km,
latitude: params.latitude,
longitude: params.longitude,
size: params.size
}).then(res => {
if (res) {
this.packingList = res
}
})
},
closeNotice() {
this.isClosed = true
if (this.transitionTimer) {
clearInterval(this.transitionTimer)
this.transitionTimer = null
}
}
},
computed: {
hasLogin() {
return this.$store.state.qnToken != ''
},
transitionStyle() {
return `transform: translateY(-${this.curIndex * 80}rpx)`
}
},
created() {
// this.locatePosition()
getMapCompanyList({
cooperationState: 0,
km: 5,
latitude: this.location.latitude,
longitude: this.location.longitude,
size: 100
}).then(res => {
if (res) {
this.packingList = res
}
})
},
onHide() {
clearInterval(this.transitionTimer)
this.transitionTimer = null
},
onShow() {
const token = this.$store.state.qnToken
if (token) {
getInquiryList({ pageNum: 1, pageSize: 10 }).then(res => {
if (res) {
this.enquiryList = res.records
if (this.enquiryList.length > 1 && !this.isClosed) {
this.transitionTimer = setInterval(() => {
this.curIndex == this.enquiryList.length - 1 ? (this.curIndex = 0) : this.curIndex++
}, 3000)
}
}
})
}
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.content { .content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
height: 100vh;
} }
.map_area { .map_area {
position: relative;
width: 750rpx;
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
position: relative;
width: 750rpx;
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
} }
.enquiry-area { .enquiry-area {
position: absolute;
top: 12rpx;
left: 32rpx;
width: 686rpx;
height: 170rpx;
padding: 20rpx 16rpx;
background-color: #fffbe8;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
border-radius: 8px;
overflow: hidden;
.enquiry-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
.notice {
display: flex;
align-items: center;
flex-direction: row;
.notice_title {
font-size: 28rpx;
color: #f5222d;
letter-spacing: 2.33rpx;
text-align: left;
font-weight: 500;
}
}
}
.notice-content {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-direction: row;
.animation-area {
width: 490rpx;
height: 80rpx;
overflow: hidden;
}
.enquiry-content {
width: 490rpx;
transition: all 1s linear;
.enquiry-item {
width: 490rpx;
height: 80rpx;
.production {
overflow: hidden;
white-space: nowrap;
word-break: break-all;
padding-top: 10rpx;
font-size: 26rpx;
color: #f5222d;
}
}
}
.enquiry-submit {
display: flex;
align-items: center;
flex-direction: row;
.text {
font-size: 28rpx;
color: #2b74ff;
letter-spacing: 2.33rpx;
}
}
}
position: absolute;
top: 12rpx;
left: 32rpx;
width: 686rpx;
height: 170rpx;
padding: 20rpx 16rpx;
background-color: #fffbe8;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
border-radius: 8px;
overflow: hidden;
.enquiry-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
.notice {
display: flex;
align-items: center;
flex-direction: row;
.notice_title {
font-size: 28rpx;
color: #f5222d;
letter-spacing: 2.33rpx;
text-align: left;
font-weight: 500;
}
}
}
.notice-content {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-direction: row;
.animation-area {
width: 490rpx;
height: 80rpx;
overflow: hidden;
}
.enquiry-content {
width: 490rpx;
transition: all 1s linear;
.enquiry-item {
width: 490rpx;
height: 80rpx;
.production {
overflow: hidden;
white-space: nowrap;
word-break: break-all;
padding-top: 10rpx;
font-size: 26rpx;
color: #f5222d;
}
}
}
.enquiry-submit {
display: flex;
align-items: center;
flex-direction: row;
.text {
font-size: 28rpx;
color: #2b74ff;
letter-spacing: 2.33rpx;
}
}
}
} }
.list-button { .list-button {
position: absolute;
bottom: 140rpx;
right: 32rpx;
width: 84rpx;
height: 84rpx;
position: absolute;
bottom: 140rpx;
right: 32rpx;
width: 84rpx;
height: 84rpx;
} }
.locate-button { .locate-button {
position: absolute;
bottom: 40rpx;
right: 32rpx;
width: 84rpx;
height: 84rpx;
position: absolute;
bottom: 40rpx;
right: 32rpx;
width: 84rpx;
height: 84rpx;
} }
.nav-login { .nav-login {
font-size: 28rpx;
color: #007aff;
text-align: right;
font-size: 28rpx;
color: #007aff;
text-align: right;
} }
.nav-title { .nav-title {
font-size: 40rpx;
color: #000000;
letter-spacing: 0;
font-weight: 500;
font-size: 40rpx;
color: #000000;
letter-spacing: 0;
font-weight: 500;
} }
.nav-search { .nav-search {
width: 440rpx;
height: 60rpx;
background: #f5f6f7;
border-radius: 16rpx;
padding-left: 24rpx;
display: flex;
align-items: center;
flex-direction: row;
width: 440rpx;
height: 60rpx;
background: #f5f6f7;
border-radius: 16rpx;
padding-left: 24rpx;
display: flex;
align-items: center;
flex-direction: row;
} }
.search-icon { .search-icon {
width: 28rpx;
height: 28rpx;
flex: 0 0 auto;
margin-right: 8rpx;
width: 28rpx;
height: 28rpx;
flex: 0 0 auto;
margin-right: 8rpx;
} }
.search-text { .search-text {
font-size: 25rpx;
flex: 1 0 auto;
color: rgba(34, 34, 34, 0.75);
font-weight: 400;
font-size: 25rpx;
flex: 1 0 auto;
color: rgba(34, 34, 34, 0.75);
font-weight: 400;
} }
.selected-company { .selected-company {
padding-top: 20rpx;
width: 750rpx;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
background-color: #fff;
.image-area {
width: 750rpx;
height: 32rpx;
display: flex;
align-items: center;
justify-content: center;
.image {
width: 64rpx;
height: 32rpx;
flex-grow: 0;
flex-shrink: 0;
}
}
padding-top: 20rpx;
width: 750rpx;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
background-color: #fff;
.image-area {
width: 750rpx;
height: 32rpx;
display: flex;
align-items: center;
justify-content: center;
.image {
width: 64rpx;
height: 32rpx;
flex-grow: 0;
flex-shrink: 0;
}
}
} }
</style> </style>
Write Preview
Loading…
Cancel
Save