|
|
@@ -0,0 +1,100 @@
|
|
|
+<template>
|
|
|
+ <view class="">
|
|
|
+ <view class="position" v-if="cellType=='1'">
|
|
|
+ <text class="tag"></text>
|
|
|
+ <text class="titles" v-text="title"></text>
|
|
|
+ <slot></slot>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell" v-if="cellType=='2'">
|
|
|
+ <text class="list-cell-span" >
|
|
|
+ <text v-text="title"></text>
|
|
|
+ <text class="num" v-if="num<=99" v-text="num"></text>
|
|
|
+ <text class="num" v-if="num>99">99+</text>
|
|
|
+ </text>
|
|
|
+ <slot></slot>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: "CellTip",
|
|
|
+ props:{
|
|
|
+ title:{
|
|
|
+ type:String,
|
|
|
+ default:''
|
|
|
+ },
|
|
|
+ num:{
|
|
|
+ type:[String, Number],
|
|
|
+ default:''
|
|
|
+ },
|
|
|
+ cellType:{
|
|
|
+ type:[String, Number],
|
|
|
+ default:'1'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .position {
|
|
|
+ position: relative;
|
|
|
+ padding: 16rpx 24rpx;
|
|
|
+ margin: 0 24rpx;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // background-color: #e8e8e8;
|
|
|
+ font-size: $uni-font-size-base;
|
|
|
+ color: $uni-text-color;
|
|
|
+ .tag {
|
|
|
+ display: inline-block;
|
|
|
+ background-color: $j-primary-border-green;
|
|
|
+ width: 8rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ .titles {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell{
|
|
|
+ position: relative;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ font-size: $uni-font-size-base;
|
|
|
+ color: $uni-text-regular-color;
|
|
|
+ .list-cell-span{
|
|
|
+ padding: 0 20rpx;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ height: 76rpx;
|
|
|
+ line-height: 76rpx;
|
|
|
+ border-bottom: 1px solid $j-primary-border-green;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ padding: 0 8rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 8rpx;
|
|
|
+ right: -50rpx;
|
|
|
+ display: inline-block;
|
|
|
+ transform: scale(0.7);
|
|
|
+ color: #FFFFFF;
|
|
|
+ background-color: $uni-color-error;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|