<template> <view class="page"> <u-navbar title="创建店铺" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='38'></u-navbar> <view class="box"> <view class="list"> <view class="listval"> <view class="tit"> 店铺名称</view> <view class="but"> <input type="text" placeholder="请输入店铺名称" /> </view> </view> <view class="listvals"> <view class="tit"> 店铺类型</view> <view class="but"> <input disabled="false" type="text" placeholder="请选择店铺类型" /> <u-icon name="arrow-down" style="position: absolute;top: 30%;right: 14rpx;"></u-icon> </view> </view> <view class="listval"> <view class="tit"> 营业时间</view> <view class="but"> <input type="text" placeholder="请输入营业时间" /> </view> </view> <view class="listvals"> <view class="tit"> 省市区</view> <view class="but"> <input disabled="false" type="text" placeholder="请选择省市区" /> <u-icon name="arrow-down" style="position: absolute;top: 30%;right: 14rpx;"></u-icon> </view> </view> <view class="jinwei"> <view class="tit"> 经纬度</view> <view class="but" style="position:relative;"> <input type="text" placeholder="请选择经度" /> <input type="text" placeholder="请选择纬度" /> <u-icon name="map-fill" size="32" style="position: absolute;top: 44rpx;right: 22rpx;z-index: 99;"></u-icon> </view> </view> <view class="listval"> <view class="tit"> 详细地址</view> <view class="but"> <input type="text" placeholder="请输入详细地址" /> </view> </view> <view class="listval"> <view class="tit"> 联系人</view> <view class="but"> <input type="text" placeholder="请输入联系人" /> </view> </view> <view class="listval"> <view class="tit"> 联系电话</view> <view class="but"> <input type="text" placeholder="请输入联系电话" /> </view> </view> <view class="baocun"> 保存 </view> </view> </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style lang="scss"> page { background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%); } .page { width: 750rpx; position: fixed; top: 0; left: 0; .box{ width: 750rpx; height: 1440rpx; background: #F4F5F7; border-radius: 0rpx 0rpx 0rpx 0rpx; padding-top: 40rpx; .list{ width: 680rpx; height: 1154rpx; background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; margin: auto; padding-top: 44rpx; padding-left: 38rpx; padding-right: 38rpx; box-sizing: border-box; .baocun{ width: 584rpx; height: 90rpx; background: linear-gradient( 270deg, #54DAA1 0%, #19CD82 100%); border-radius: 54rpx 54rpx 54rpx 54rpx; text-align: center; line-height: 90rpx; margin-top: 82rpx; font-weight: 500; font-size: 40rpx; color: #FFFFFF; } .jinwei{ display: flex; justify-content: space-between; margin-top: 34rpx; .tit{ margin-top: 40rpx; font-size: 32rpx; color: #3D3D3D; } .but{ width: 462rpx; height: 140rpx; background: #F0F0F0; border-radius: 12rpx 12rpx 12rpx 12rpx; input{ height: 70rpx; line-height: 70rpx; padding-left: 22rpx; } } } .listvals{ display: flex; justify-content: space-between; margin-top: 34rpx; .tit{ margin-top: 12rpx; font-size: 32rpx; color: #3D3D3D; } .but{ width: 462rpx; height: 70rpx; background: #F0F0F0; border-radius: 12rpx 12rpx 12rpx 12rpx; position: relative; input{ height: 70rpx; line-height: 70rpx; padding-left: 22rpx; } } } .listval{ display: flex; justify-content: space-between; margin-top: 34rpx; .tit{ margin-top: 12rpx; font-size: 32rpx; color: #3D3D3D; } .but{ width: 462rpx; height: 70rpx; background: #F0F0F0; border-radius: 12rpx 12rpx 12rpx 12rpx; input{ height: 70rpx; line-height: 70rpx; padding-left: 22rpx; } } } } } } </style>