Browse Source

Merge branch 'refs/heads/lihui/feature-20250815155204-金币优化' into milestone-20250815-金币优化

# Conflicts:
#	src/views/recharge/gold/addCoinRecharge.vue
youhua/chongzhi
lihui 2 months ago
parent
commit
3f19d29fd1
  1. 124
      src/views/consume/gold/addCoinConsume.vue
  2. 138
      src/views/recharge/gold/addCoinRecharge.vue
  3. 96
      src/views/refund/gold/addCoinRefund.vue

124
src/views/consume/gold/addCoinConsume.vue

@ -1,16 +1,16 @@
<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { ElIcon, ElMessage, ElMessageBox } from "element-plus";
import {onMounted, reactive, ref, watch} from "vue";
import {ElIcon, ElMessage, ElMessageBox} from "element-plus";
import moment from "moment";
import request from "@/util/http.js"
import Cookies from 'js-cookie';
import { useAdminStore } from "@/store/index.js";
import { storeToRefs } from "pinia";
import { WarnTriangleFilled } from "@element-plus/icons-vue";
import {useAdminStore} from "@/store/index.js";
import {storeToRefs} from "pinia";
import {WarnTriangleFilled} from "@element-plus/icons-vue";
import dayjs from "dayjs";
const adminStore = useAdminStore();
const { adminData, menuTree } = storeToRefs(adminStore);
const {adminData, menuTree} = storeToRefs(adminStore);
//
const trimJwCode = () => {
if (addConsume.value.jwcode) {
@ -64,11 +64,11 @@ const addConsume = ref({
const Ref = ref(null)
const rules = reactive({
jwcode: [
{ required: true, message: "请输入精网号", trigger: "blur" },
{required: true, message: "请输入精网号", trigger: "blur"},
],
goodsName: [{ required: true, message: "请选择商品", trigger: "blur" }],
goodsName: [{required: true, message: "请选择商品", trigger: "blur"}],
sumGold: [
{ required: true, message: "消耗金币总数不能为空", trigger: "blur" },
{required: true, message: "消耗金币总数不能为空", trigger: "blur"},
{
validator: (rule, value, callback) => {
// 00.10
@ -86,6 +86,7 @@ const rules = reactive({
});
//
const goods = ref([])
//
function validateInput() {
const sumGold = parseFloat(addConsume.value.sumGold);
@ -155,7 +156,6 @@ function validateInput() {
}
//
const totalAvailableGold = (user.value.nowSumGold)
if (user.value.jwcode && sumGold > totalAvailableGold) {
@ -173,10 +173,10 @@ function calculateCoins(sumGold) {
console.log("消耗金币计算函数:计算金币", sumGold);
const parsedSumGold = parseFloat(sumGold);
if (isNaN(parsedSumGold) || parsedSumGold <= 0 || !user.value.jwcode) {
return { free: 0, permanent: 0, task: 0 };
return {free: 0, permanent: 0, task: 0};
}
const { nowFreeGold, nowPermanentGold, nowTaskGold } = user.value;
const {nowFreeGold, nowPermanentGold, nowTaskGold} = user.value;
let remaining = parsedSumGold;
let freeUsed = 0, permanentUsed = 0, taskUsed = 0;
@ -202,8 +202,9 @@ function calculateCoins(sumGold) {
addConsume.value.permanentGold = permanentUsed;
addConsume.value.taskGold = taskUsed;
return { free: freeUsed, permanent: permanentUsed, task: taskUsed };
return {free: freeUsed, permanent: permanentUsed, task: taskUsed};
}
// cookie key
const WriteCookies = ref(null)
// cookie value
@ -311,6 +312,7 @@ function resetForm() {
nowSumGold: null
}
}
//
const ConsumeDialogVisible = ref(false);
@ -415,7 +417,7 @@ const getUser = async function (jwcode) {
// POST
const result = await request({
url: "/user/selectUser",
data: { jwcode }
data: {jwcode}
});
console.log("请求成功", result);
@ -442,7 +444,7 @@ const getUser = async function (jwcode) {
if (addConsume.value.sumGold) {
const parsedSumGold = parseFloat(addConsume.value.sumGold);
if (!isNaN(parsedSumGold) && parsedSumGold > 0) {
const { free, permanent, task } = calculateCoins(parsedSumGold);
const {free, permanent, task} = calculateCoins(parsedSumGold);
addConsume.value.freeGold = free;
addConsume.value.permanentGold = permanent;
addConsume.value.taskGold = task;
@ -498,7 +500,7 @@ watch(
(newValue) => {
const parsedNewValue = parseFloat(newValue);
if (!isNaN(parsedNewValue) && parsedNewValue > 0) {
const { free, permanent, task } = calculateCoins(parsedNewValue);
const {free, permanent, task} = calculateCoins(parsedNewValue);
addConsume.value.freeGold = free;
addConsume.value.permanentGold = permanent;
addConsume.value.taskGold = task;
@ -524,47 +526,47 @@ onMounted(async function () {
<template>
<div>
<el-form :model="addConsume" ref="Ref" :rules="rules" style="max-width: 600px;" class="add-form">
<el-form :model="addConsume" ref="Ref" :rules="rules" style="max-width: 600px;" class="add-form" label-width="auto" label-position="right">
<el-form-item prop="jwcode" label="精网号" style="margin-top: 50px">
<el-input v-model="addConsume.jwcode" style="width: 10vw;margin-left:45px" />
<el-input v-model="addConsume.jwcode" style="width: 10vw;"/>
<el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 10px">查询
</el-button>
</el-form-item>
<el-form-item prop="goodsName" label="商品名称" style="flex: 1; margin-right: 0px">
<el-select v-model="addConsume.goodsName" placeholder="请选择商品" style="width: 10vw;margin-left:30px">
<el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item.value" />
<el-select v-model="addConsume.goodsName" placeholder="请选择商品" style="width: 10vw;">
<el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item prop="sumGold" label="消耗金币总数">
<el-input v-model="addConsume.sumGold" style="width: 10vw;margin-left:2px" @input="validateInput()"
@change="calculateCoins(addConsume.sumGold)" />
<el-input v-model="addConsume.sumGold" style="width: 10vw;" @input="validateInput()"
@change="calculateCoins(addConsume.sumGold)"/>
</el-form-item>
<!-- 三类金币自动计算禁用状态不可编辑 -->
<el-form-item prop="permanentGold" label="永久金币">
<el-input v-model="addConsume.permanentGold" disabled style="width: 10vw;margin-left:40px">
<el-input v-model="addConsume.permanentGold" disabled style="width: 10vw;">
<template #default="scope">{{ scope.row.permanentGold }}</template>
</el-input>
<p style="margin-right: 0px">&nbsp;&nbsp;</p>
</el-form-item>
<el-form-item prop="freeCoin" label="免费金币">
<el-input disabled v-model="addConsume.freeGold" style="width: 10vw;margin-left:40px" />
<el-input disabled v-model="addConsume.freeGold" style="width: 10vw;"/>
<p style="margin-right: 0px">&nbsp;&nbsp;</p>
</el-form-item>
<el-form-item prop="taskGold" label="任务金币">
<el-input disabled v-model="addConsume.taskGold" style="width: 10vw;margin-left:40px" />
<el-input disabled v-model="addConsume.taskGold" style="width: 10vw;"/>
<p style="margin-right: 20px">&nbsp;&nbsp;</p>
</el-form-item>
<el-form-item prop="remark" label="备注">
<el-input v-model="addConsume.remark" style="width: 13.5vw;margin-left:70px" :rows="4" maxlength="100"
show-word-limit type="textarea" />
<el-input v-model="addConsume.remark" style="width: 13.5vw;" :rows="4" maxlength="100"
show-word-limit type="textarea"/>
</el-form-item>
<el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button>
@ -585,20 +587,18 @@ onMounted(async function () {
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="历史金币总数">
<!-- 检查 user.historySumGold 是否为有效的数字 -->
<p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">
{{ Number(user.historySumGold) }}
</p>
<!-- 如果不是有效的数字显示默认值 -->
<p v-else></p>
<el-form-item label="当前金币总数" style="width: 500px">
<span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
user.nowSumGold
}}</span>
</el-form-item>
<el-form-item style="margin-top: -23px">
<span style="display: inline; white-space: nowrap; color: #b1b1b1"
v-if="user.historyPermanentGold !== undefined">(永久金币:{{ user.historyPermanentGold }};免费金币:{{
(user.historyFreeGold)
}};任务金币:{{ user.historyTaskGold }})</span>
<!-- 金币详情独立显示 -->
<el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
<span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
user.nowPermanentGold
}};
免费金币:{{ user.nowFreeGold }};
任务金币:{{ user.nowTaskGold }})</span>
</el-form-item>
</el-col>
</el-row>
@ -611,22 +611,14 @@ onMounted(async function () {
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="当前金币总数" style="width: 500px">
<span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{ user.nowSumGold
}}</span>
</el-form-item>
<!-- 金币详情独立显示 -->
<el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
<span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
user.nowPermanentGold }};
免费金币:{{ user.nowFreeGold }};
任务金币:{{ user.nowTaskGold }})</span>
<el-form-item label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
</el-form-item>
</el-col>
</el-row>
<!-- 第三行首次充值日期 + 充值次数 -->
<el-row style="margin-top:-23px">
<el-row >
<el-col :span="9">
<el-form-item label="首次充值日期">
<p v-if="user.firstRecharge">
@ -635,8 +627,8 @@ onMounted(async function () {
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item>
</el-col>
</el-row>
@ -644,11 +636,6 @@ onMounted(async function () {
<!-- 第四行消费次数 + 所属门店 -->
<el-row>
<el-col :span="9">
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="所属门店">
<p>{{ user.market }}</p>
</el-form-item>
@ -704,6 +691,11 @@ onMounted(async function () {
</el-col>
</el-row>
<div class="field">
<div class="field-label">备注</div>
<el-input v-model="addConsume.remark" disabled/>
</div>
</div>
<!-- 底部按钮居中 -->
@ -723,36 +715,36 @@ onMounted(async function () {
<!-- 用户信息 -->
<div>
<div class="field-label">用户信息</div>
<el-input :model-value="user.jwcode + (user.name ? '' + user.name + '' : '')" disabled />
<el-input :model-value="user.jwcode + (user.name ? '' + user.name + '' : '')" disabled/>
</div>
<!-- 活动名称 -->
<div class="field">
<div class="field-label">商品名称</div>
<el-input v-model="addConsume.goodsName" disabled />
<el-input v-model="addConsume.goodsName" disabled/>
</div>
<!--金币总数 -->
<div class="field">
<div class="field-label">金币总数</div>
<el-input v-model="addConsume.sumGold" disabled />
<el-input v-model="addConsume.sumGold" disabled/>
</div>
<!-- 金币详细信息同一行左右排列 -->
<el-row :gutter="20" class="coins-row">
<el-col :span="8">
<div class="field">
<div class="field-label">永久金币</div>
<el-input v-model="addConsume.permanentGold" disabled />
<el-input v-model="addConsume.permanentGold" disabled/>
</div>
</el-col>
<el-col :span="8">
<div class="field">
<div class="field-label">免费金币</div>
<el-input v-model="addConsume.freeGold" disabled />
<el-input v-model="addConsume.freeGold" disabled/>
</div>
</el-col>
<el-col :span="8">
<div class="field">
<div class="field-label">任务金币</div>
<el-input v-model="addConsume.taskGold" disabled />
<el-input v-model="addConsume.taskGold" disabled/>
</div>
</el-col>
@ -760,13 +752,13 @@ onMounted(async function () {
<!-- 风险提示 -->
<div style="display: flex; align-items: center; margin-top: 20px;">
<el-icon :size="24" color="#FFD700">
<WarnTriangleFilled />
<WarnTriangleFilled/>
</el-icon>
<p>重复购买风险提示</p>
</div>
<!-- 记录 + 虚线分隔 -->
<div>
<el-divider border-style="dashed" />
<el-divider border-style="dashed"/>
<p>检测到该用户近期有相似消费记录</p>
· {{ ReadCookiesTime }} 购买 {{ addConsume.goodsName }}(操作人: {{ adminData.adminName }})
</div>

138
src/views/recharge/gold/addCoinRecharge.vue

@ -699,9 +699,9 @@ onMounted(() => {
<el-form-item prop="voucher" label="交款凭证" style="margin-bottom: 5px">
<el-upload :http-request="customUpload" class="avatar-uploader" :show-file-list="false"
:before-upload="beforeAvatarUpload" style="width: 100px; height: 115px">
<img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100px; height: 115px"/>
<img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100px; height: 115px" />
<el-icon v-else class="avatar-uploader-icon" style="width: 100px; height: 100px">
<Plus/>
<Plus />
</el-icon>
</el-upload>
<p style="margin-left: 10px; color: rgb(177, 176, 176)">
@ -718,65 +718,50 @@ onMounted(() => {
</el-form>
<!-- 客户信息栏 -->
<el-card v-if="user.jwcode" class="beautiful">
<el-card v-if="user.jwcode" style="width: 800px" class="beautiful">
<el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
<el-text size="large" style="margin-left: 20px">客户信息</el-text>
<!-- 第一行姓名 + 历史金币 -->
<el-row style="margin-top: 20px">
<el-col :span="9">
<el-form-item label="姓名:">
<el-form-item label="姓名">
<p>{{ user.name }}</p>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="历史金币总数">
<!-- 检查 user.historySumGold 是否为有效的数字 -->
<p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">
{{ Number(user.historySumGold) / 100 }}
</p>
<!-- 如果不是有效的数字显示默认值 -->
<p v-else></p>
<el-form-item label="当前金币总数" style="width: 500px">
<span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
user.nowSumGold
}}</span>
</el-form-item>
<el-form-item style="margin-top: -23px">
<span style="display: inline; white-space: nowrap; color: #b1b1b1"
v-if="user.historyPermanentGold !== undefined">(永久金币:{{
user.historyPermanentGold / 100
}};免费金币:{{
(user.historyFreeGold) / 100
}};任务金币:{{ user.historyTaskGold / 100 }})</span>
<!-- 金币详情独立显示 -->
<el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
<span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
user.nowPermanentGold
}};
免费金币:{{ user.nowFreeGold }};
任务金币:{{ user.nowTaskGold }})</span>
</el-form-item>
</el-col>
</el-row>
<!-- 第二行精网号 + 当前金币独立行 -->
<el-row style="margin-top:-23px">
<el-row>
<el-col :span="9">
<el-form-item label="精网号">
<p>{{ user.jwcode }}</p>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="当前金币总数" style="width: 500px">
<span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
user.nowSumGold
/ 100
}}</span>
</el-form-item>
<!-- 金币详情独立显示 -->
<el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
<span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
user.nowPermanentGold / 100
}};
免费金币:{{ user.nowFreeGold / 100 }};
任务金币:{{ user.nowTaskGold / 100 }})</span>
<el-form-item label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
</el-form-item>
</el-col>
</el-row>
<!-- 第三行首次充值日期 + 充值次数 -->
<el-row style="margin-top:-23px">
<el-row >
<el-col :span="9">
<el-form-item label="首次充值日期">
<p v-if="user.firstRecharge">
@ -785,8 +770,8 @@ onMounted(() => {
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item>
</el-col>
</el-row>
@ -794,11 +779,6 @@ onMounted(() => {
<!-- 第四行消费次数 + 所属门店 -->
<el-row>
<el-col :span="9">
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="所属门店">
<p>{{ user.market }}</p>
</el-form-item>
@ -836,6 +816,14 @@ onMounted(() => {
</div>
</el-col>
</el-row>
<div class="field">
<div class="field-label">备注</div>
<el-input v-model="recharge.remark" disabled/>
</div>
</div>
<!-- 底部按钮居中 -->
@ -924,45 +912,6 @@ p {
margin-left: 50px;
}
/* 上传图片的格式 */
.avatar-uploader .avatar {
width: 50px;
height: 50px;
display: block;
}
</style>
<style>
.error-message {
color: red;
font-size: 8px;
}
.is-invalid .el-input__inner {
border-color: red;
}
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 50px;
height: 50px;
text-align: center;
}
.add-form {
margin-top: 50px;
max-width: 50%;
@ -994,3 +943,32 @@ p {
gap: 12px;
}
</style>
<style>
/* 上传图片的格式 */
.avatar-uploader .avatar {
width: 50px;
height: 50px;
display: block;
}
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 50px;
height: 50px;
text-align: center;
}
</style>

96
src/views/refund/gold/addCoinRefund.vue

@ -506,22 +506,30 @@ onMounted(async function () {
</el-form>
<!-- 客户信息栏 -->
<el-card v-if="user.jwcode" class="beautiful">
<el-card v-if="user.jwcode" style="width: 800px" class="beautiful">
<el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
<el-text size="large" style="margin-left: 20px">客户信息</el-text>
<!-- 第一行姓名 + 历史金币 -->
<el-row style="margin-top: 20px">
<el-col :span="9">
<el-form-item label="姓名:">
<el-form-item label="姓名">
<p>{{ user.name }}</p>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="历史金币总数">
<p v-if="!isNaN(Number(user.historySumGold))">
{{ Number(user.historySumGold) }}
</p>
<el-form-item label="当前金币总数" style="width: 500px">
<span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
user.nowSumGold
}}</span>
</el-form-item>
<!-- 金币详情独立显示 -->
<el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
<span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
user.nowPermanentGold
}};
免费金币:{{ user.nowFreeGold }};
任务金币:{{ user.nowTaskGold }})</span>
</el-form-item>
</el-col>
</el-row>
@ -534,22 +542,14 @@ onMounted(async function () {
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="当前金币总数" style="width: 500px">
<span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{ user.nowSumGold
}}</span>
</el-form-item>
<!-- 金币详情独立显示 -->
<el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
<span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
user.nowPermanentGold }};
免费金币:{{ user.nowFreeGold }};
任务金币:{{ user.nowTaskGold }})</span>
<el-form-item label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
</el-form-item>
</el-col>
</el-row>
<!-- 第三行首次充值日期 + 充值次数 -->
<el-row style="margin-top:-23px">
<el-row >
<el-col :span="9">
<el-form-item label="首次充值日期">
<p v-if="user.firstRecharge">
@ -558,8 +558,8 @@ onMounted(async function () {
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="充值次数">
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item>
</el-col>
</el-row>
@ -567,11 +567,6 @@ onMounted(async function () {
<!-- 第四行消费次数 + 所属门店 -->
<el-row>
<el-col :span="9">
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="所属门店">
<p>{{ user.market }}</p>
</el-form-item>
@ -590,16 +585,41 @@ p {
.el-form-item {
margin-left: 50px;
}
</style>
<style>
.form-style {
margin-top: 50px;
max-width: 50%;
float: left;
}
.form-style2 {
max-width: 60%;
}
p {
font-size: 13px;
transform: scale(1);
}
.beautiful {
width: 700px;
float: right;
margin-right: 300px;
margin-top: 150px;
}
</style>
<style>
/* 上传图片的格式 */
.avatar-uploader .avatar {
width: 50px;
height: 50px;
display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
@ -620,26 +640,4 @@ p {
height: 50px;
text-align: center;
}
.form-style {
margin-top: 50px;
max-width: 50%;
float: left;
}
.form-style2 {
max-width: 60%;
}
p {
font-size: 13px;
transform: scale(1);
}
.beautiful {
width: 700px;
float: right;
margin-right: 300px;
margin-top: 150px;
}
</style>
Loading…
Cancel
Save