|
|
@@ -1,28 +1,27 @@
|
|
|
<template>
|
|
|
<view class="content-box">
|
|
|
<view class="info-box">
|
|
|
- <view class="info-title-box">
|
|
|
- <!-- <image src="/static/require-icon.png" mode="aspectFill"></image> -->
|
|
|
- <text>上传图片</text>
|
|
|
- </view>
|
|
|
- <view class="info-value-box">
|
|
|
-
|
|
|
- <view class="update_button display-flex">
|
|
|
- <view class="upload-box" @click="getImage('album')">
|
|
|
- <view class="img" style="margin-top: 2%;">
|
|
|
- <image src="/static/upload-photo.png" class="photo"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="display-wrap" style="width: 75%;">
|
|
|
- <view class="display-flex upload-box-photo" v-for="(item, index) in uploadList" :key="index">
|
|
|
- <image :src="item" mode="aspectFit" style="width: 100%; height: 100%" @click="showLarge(item)"/>
|
|
|
- <image src="/static/del.png" class="del-icon"mode="aspectFit" style="width: 30rpx; height: 30rpx" @click="delPhoto(index)"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="img-container">
|
|
|
+ <label for="img">上传图片</label>
|
|
|
+ <view class="note-image-box">
|
|
|
+ <view class="note-image-item" v-for="(item,index) in uploadList" :key="index">
|
|
|
+ <!-- //右上角删除图标 -->
|
|
|
+ <view class="close-icon" @click="delPhoto(index)">
|
|
|
+ <uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <view class="image-box" @click="showLarge(item)">
|
|
|
+ <image :src="item" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- //因为上传图片设置9张 使用这里做判断 -->
|
|
|
+ <view v-if="uploadList.length < 9" class="note-image-item" @click="getImage('album')">
|
|
|
+ <!-- //添加图片按钮 -->
|
|
|
+ <view class="image-box">
|
|
|
+ <uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
<view class="info-box">
|
|
|
@@ -41,7 +40,7 @@
|
|
|
<text>添加链接</text>
|
|
|
</view>
|
|
|
<view class="info-value-box">
|
|
|
- <input type="text" placeholder="示例：http://www.baidu.com" v-model="contentLink">
|
|
|
+ <textarea type="text" class="textarea-box" placeholder="示例：https://www.baidu.com" v-model="contentLink"></textarea>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="footer-box">
|
|
|
@@ -461,7 +460,7 @@
|
|
|
}
|
|
|
.del-icon {
|
|
|
position: absolute;
|
|
|
- right: -10rpx;
|
|
|
+ right: -15rpx;
|
|
|
width: 30rpx;
|
|
|
height: 30rpx;
|
|
|
}
|
|
|
@@ -525,7 +524,7 @@
|
|
|
color: #fff;
|
|
|
}
|
|
|
.footer-box {
|
|
|
- margin-top: 15%;
|
|
|
+ margin-top: 5%;
|
|
|
width: 90%;
|
|
|
display: flex;
|
|
|
justify-content: space-evenly;
|
|
|
@@ -537,34 +536,52 @@
|
|
|
margin: 3% auto;
|
|
|
padding: 4%;
|
|
|
}
|
|
|
- // .mask-share-box{
|
|
|
- // position: fixed;
|
|
|
- // width: 100%;
|
|
|
- // height: 100%;
|
|
|
- // z-index: 999;
|
|
|
- // background-color: rgba(0,0,0,.7);
|
|
|
- // image {
|
|
|
- // width: 100rpx;
|
|
|
- // height: 100rpx;
|
|
|
- // float: right;
|
|
|
- // margin-right: 15%;
|
|
|
- // }
|
|
|
- // view {
|
|
|
- // color: #fff;
|
|
|
- // font-size: 32rpx;
|
|
|
- // text-align: center;
|
|
|
- // margin: 15% 0 70% 15%;
|
|
|
- // font-weight: bold;
|
|
|
- // }
|
|
|
- // button {
|
|
|
- // width: 200rpx;
|
|
|
- // font-size: 26rpx;
|
|
|
- // position: fixed;
|
|
|
- // bottom: 35%;
|
|
|
- // left: 37%;
|
|
|
- // background: transparent;
|
|
|
- // color: #fff;
|
|
|
- // border: 1px solid #fff;
|
|
|
- // }
|
|
|
- // }
|
|
|
+ .img-container{
|
|
|
+ width: 90%;
|
|
|
+ font-size: 26rpx;
|
|
|
+ .note-image-box{
|
|
|
+ margin-top: 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 10px;
|
|
|
+ .note-image-item{
|
|
|
+ position: relative;
|
|
|
+ //这两个百分比很关键
|
|
|
+ width: 33.33%;
|
|
|
+ height: 0;
|
|
|
+ padding-top: 33.33%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .close-icon{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #d5d5d5;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .image-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ right: 5px;
|
|
|
+ bottom: 5px;
|
|
|
+ left: 5px;
|
|
|
+ border: 1px #eee solid;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
