mall-app-t/pages/user/point/share.vue

124 lines
3.0 KiB
Vue
Raw Normal View History

2024-06-03 01:09:01 +08:00
<template>
<pb-layout navbar="inner" iconColor="#fff" class="share-point-wrap" leftIcon="leftIcon" color="#fff" title="分发积分"
:bgStyle="bgStyle">
<view class="title ss-m-t-80">
<view class="main">分发积分</view>
<view class="sub ss-flex ss-row-center ss-m-t-55"><text style="color: #F3D3BF;"
class="cicon-safe"></text>订单多多·出单多多<text style="color: #F3D3BF;" class="cicon-safe"></text></view>
</view>
<view class="user-search">
<view class="search">
<uni-easyinput :styles="{ backgroundColor: 'transparent', color: '#E7B493' }" placeholderStyle="color: #E7B493;"
:clearable="false" :inputBorder="false" type="number" trim="all" suffixIcon="search" placeholder="请输入用户名" />
</view>
<view class="result" :style="{ height: resultHeight, overflow: 'auto' }">
<view v-for="item in 10" class="user ss-flex ss-row-between ss-col-center">
<view class="user-info ss-flex ss-col-center ss-gap-20">
<image style="width: 48rpx; height: 48rpx;" src="/static/default_avatar.png" />
<view class="nickname">哈哈哈</view>
</view>
<view class="input-point">
<uni-easyinput :styles="{ backgroundColor: 'transparent', color: '#E7B493' }"
:placeholderStyle="placeholderStyle" :clearable="false" :inputBorder="false" type="number" trim="all"
placeholder="请输入积分额度" />
</view>
</view>
</view>
</view>
</pb-layout>
</template>
<script setup>
import { ref, computed } from 'vue'
import peach from '@/peach'
const placeholderStyle = ref('color: #E7B493')
const resultHeight = computed(() => {
return `calc(100vh - 728rpx)`
})
const state = ref({
isShaking: false,
agreeStatus: false,
})
const bgStyle = {
backgroundImage: '/static/point.png',
imageType: 'local',
backgroundColor: '#fff',
description: '',
}
function onProtocol(title) {
}
</script>
<style lang="scss" scoped>
.share-point-wrap {
.title {
.main {
font-size: 80rpx;
color: rgba(232, 181, 150, 1);
letter-spacing: 20px;
position: relative;
left: 10px;
text-align: center;
}
.sub {
font-size: 32rpx;
color: #f3d3bf;
letter-spacing: 4px;
}
}
.user-search {
margin: 50rpx 40rpx 0;
.search {
border: 1px solid #E7B493;
border-radius: 30px;
}
:deep(.uniui-search) {
color: #E7B493 !important;
padding-right: 10px;
}
:deep(.uni-easyinput__content-input) {
padding-left: 15px !important;
}
.result {
.user {
margin-top: 20px;
border: 1px solid #E7B493;
border-radius: 30px;
padding: 0 40rpx;
.user-info {
.nickname {
font-size: 26rpx;
color: #E7B493;
}
}
.input-point {
:deep(.uni-easyinput__content-input) {
text-align: right;
}
}
}
}
}
}
</style>