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