22 changed files with 856 additions and 89 deletions
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<view class="body"> |
|||
<navigator url="/pages/productDetails/review"> |
|||
<view class="reviews_item" v-for="(item,index) in 2" :key="index"> |
|||
<view class="reviews_item_title"> |
|||
<view class="reviews_title_user"> |
|||
<text>e***8</text> |
|||
<uni-rate size="18" :disabled="true" disabledColor="red" :value="4" active-color="red" :is-fill="false"/> |
|||
</view> |
|||
<view class="reviews_title_time">07/03/2022</view> |
|||
</view> |
|||
<view class="reviews_item_color">Color:Multicolor</view> |
|||
<view class="reviews_item_content">So unique! Can’t wait to wear these.</view> |
|||
<view class="reviews_item_image"> |
|||
<view class="reviews_image_content" v-for="(item,index) in 3" :key="index"></view> |
|||
</view> |
|||
<view class="more"> |
|||
<image src="../../static/img/more.png" mode="" @click="isShwo=true"></image> |
|||
<view class="more_delete" v-show="isShwo">delete</view> |
|||
</view> |
|||
</view> |
|||
</navigator> |
|||
<view class="mask" v-show="isShwo" @click="isShwo=false"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isShwo:false |
|||
} |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
page{ |
|||
border-top: 14.67rpx #F6F5FA solid; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.body{ |
|||
padding: 0 32rpx; |
|||
} |
|||
.more{ |
|||
text-align: right; |
|||
position: relative; |
|||
// margin-top: 20rpx; |
|||
image{ |
|||
width: 24rpx; |
|||
height: 6.67rpx; |
|||
} |
|||
.more_delete{ |
|||
background-image: url(@/static/img/more_bf.png); |
|||
background-size: 100% 100%; |
|||
width: 102.67rpx; |
|||
height: 67.33rpx; |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 20rpx; |
|||
line-height: 50rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
z-index: 999; |
|||
} |
|||
} |
|||
.mask{ |
|||
background-color: white; |
|||
opacity: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,194 @@ |
|||
<template> |
|||
<view> |
|||
<uni-nav-bar :statusBar="true" left-icon="left" title="Review" color="#000000" :fixed="true" @clickLeft="back"> |
|||
<block slot="right"> |
|||
<view class="nav_right"> |
|||
<button>Submit</button> |
|||
</view> |
|||
</block> |
|||
</uni-nav-bar> |
|||
<view class="body"> |
|||
<view class="order_popup_commodity"> |
|||
<view class="good_info" v-for="(item,index) in 1 " :key="index"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view> |
|||
<view class="left_info"> |
|||
<view class="info_name">Adidas Yeezy Boost 350 V2 DazzlingBlue Black GY7164 Men's</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>Multicolor;41</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="info_price"> |
|||
<text>US$314.00</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="review"> |
|||
<view class="review_title"> |
|||
<text>Score</text> |
|||
<uni-rate size="22" disabledColor="red" :value="0" active-color="red" :is-fill="false" class="rate"/> |
|||
</view> |
|||
<view class="review_content"> |
|||
<image src="../../static/img/write.png" mode=""></image> |
|||
<textarea placeholder="Write reviews"></textarea> |
|||
</view> |
|||
<view class="reason_upload"> |
|||
<view class="reason_upload_item"> |
|||
<image src="/static/img/vedio.png" class="upload_item_camera1" mode=""></image> |
|||
<view>Upload the video</view> |
|||
</view> |
|||
<view class="reason_upload_item"> |
|||
<image src="/static/img/camera.png" class="upload_item_camera" mode=""></image> |
|||
<view>Upload pictures</view> |
|||
</view> |
|||
|
|||
<view class="reason_upload_item reason_upload_item1"> |
|||
<image src="/static/img/logo.png" class="upload_item_image" mode=""></image> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="reason_upload_tips">Upload JPG, PNG format, within 3M</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
back(){ |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
.review{ |
|||
padding: 0 26rpx; |
|||
padding-top: 35.33rpx; |
|||
|
|||
.review_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
margin-bottom: 44rpx; |
|||
.rate{ |
|||
margin-left: 24.67rpx; |
|||
} |
|||
} |
|||
.review_content{ |
|||
display: flex; |
|||
image{ |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
} |
|||
textarea{ |
|||
font-size: 28rpx; |
|||
font-weight: 400; |
|||
width: 100%; |
|||
height: 113.33rpx; |
|||
margin-left: 4rpx; |
|||
} |
|||
} |
|||
.reason_upload{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-bottom: 34.67rpx; |
|||
.reason_upload_item{ |
|||
border: 1px dashed #D2D2D2; |
|||
border-radius: 15rpx; |
|||
width: 156rpx; |
|||
height: 156rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
font-size: 12rpx; |
|||
color: #BFBCBC; |
|||
margin-right: 23.33rpx; |
|||
|
|||
&:nth-child(3n+3){ |
|||
margin-right: 0; |
|||
} |
|||
.upload_item_camera{ |
|||
width: 72rpx; |
|||
height: 54.67rpx; |
|||
margin-bottom: 14rpx; |
|||
} |
|||
.upload_item_camera1{ |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
// margin-bottom: 14rpx; |
|||
|
|||
} |
|||
.upload_item_image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 15rpx; |
|||
} |
|||
} |
|||
.reason_upload_item1{ |
|||
position: relative; |
|||
&::after{ |
|||
content: ""; |
|||
width: 30.67rpx; |
|||
height: 30.67rpx; |
|||
position: absolute; |
|||
right: -12rpx; |
|||
top: -12rpx; |
|||
z-index: 99; |
|||
background-image: url("@/static/img/close3.png"); |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
.reason_upload_tips{ |
|||
font-size: 20rpx; |
|||
color: #666666; |
|||
} |
|||
} |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.nav_right{ |
|||
|
|||
|
|||
button{ |
|||
width: 116.67rpx; |
|||
height: 48rpx; |
|||
background-color: black; |
|||
margin: 0; |
|||
line-height: 48rpx; |
|||
border-radius: 24rpx; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
color: white; |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
} |
|||
.body{ |
|||
border-top: 14.67rpx #F6F5FA solid; |
|||
} |
|||
.order_popup_commodity{ |
|||
padding: 0 33.33rpx; |
|||
border-bottom: 14.67rpx #F6F5FA solid; |
|||
} |
|||
|
|||
</style> |
|||
|
After Width: | Height: | Size: 506 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,10 @@ |
|||
## 0.2.1（2022-05-09） |
|||
- 修复 content 为空时仍然弹出的bug |
|||
## 0.2.0（2022-05-07） |
|||
**注意：破坏性更新** |
|||
- 更新 text 属性变更为 content |
|||
- 更新 移除 width 属性 |
|||
## 0.1.1（2022-04-27） |
|||
- 修复 组件根 text 嵌套组件 warning |
|||
## 0.1.0（2022-04-21） |
|||
- 初始化 |
|||
@ -0,0 +1,68 @@ |
|||
<template> |
|||
<view class="uni-tooltip"> |
|||
<slot></slot> |
|||
<view v-if="content || $slots.content" class="uni-tooltip-popup"> |
|||
<slot name="content"> |
|||
{{content}} |
|||
</slot> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
/** |
|||
* Tooltip 提示文字 |
|||
* @description 常用于展示鼠标 hover 时的提示信息。 |
|||
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-tooltip |
|||
* @property {String} content 弹出层显示的内容 |
|||
* @property {String} placement出现位置, 目前只支持 left |
|||
*/ |
|||
|
|||
|
|||
export default { |
|||
name: "uni-tooltip", |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
}, |
|||
props: { |
|||
content: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
|
|||
placement: { |
|||
type: String, |
|||
default: 'bottom' |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-tooltip { |
|||
position: relative; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.uni-tooltip-popup { |
|||
z-index: 1; |
|||
display: none; |
|||
position: absolute; |
|||
left: 0; |
|||
background-color: #333; |
|||
border-radius: 8px; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
text-align: left; |
|||
line-height: 16px; |
|||
padding: 12px; |
|||
} |
|||
|
|||
|
|||
.uni-tooltip:hover .uni-tooltip-popup { |
|||
display: block; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
{ |
|||
"id": "uni-tooltip", |
|||
"displayName": "uni-tooltip", |
|||
"version": "0.2.1", |
|||
"description": "Tooltip 提示文字", |
|||
"keywords": [ |
|||
"uni-tooltip", |
|||
"uni-ui", |
|||
"tooltip", |
|||
"tip", |
|||
"文字提示" |
|||
], |
|||
"repository": "", |
|||
"engines": { |
|||
}, |
|||
"dcloudext": { |
|||
"category": [ |
|||
"前端组件", |
|||
"通用组件" |
|||
], |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无 ", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
}, |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "u" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "u", |
|||
"百度": "u", |
|||
"字节跳动": "u", |
|||
"QQ": "u" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
## Badge 数字角标 |
|||
> **组件名：uni-tooltip** |
|||
> 代码块： `uTooltip` |
|||
|
|||
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景， |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-tooltip) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
Loading…
Reference in new issue