761 lines
24 KiB
Vue
761 lines
24 KiB
Vue
<template>
|
|
<div ref="INDEX" class="template-layout" :style="renderStyle('INDEX')" :dir="dirVal">
|
|
<div class="head">
|
|
<div ref="TOP" class="top" :style="renderStyle('TOP')">
|
|
<div ref="RULE" class="rule" :style="renderStyle('RULE')" @click="showRule = true">
|
|
{{ getLangText('RULE') }}
|
|
</div>
|
|
<div class="layout-count-down">
|
|
<div ref="COUNT_DOWN" :style="renderStyle('COUNT_DOWN')" class="count-down" dir="ltr">
|
|
<div class="flex-c">
|
|
<div v-for="(item, index) in countDowns" :key="index" class="count-down-text">
|
|
<div :ref="item.block" :style="renderStyle(item.block)" class="block flex-c">0</div>
|
|
<div :ref="item.label" :style="renderStyle(item.label)" class="label">{{ getLangText(item.label) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ref="ACTIVIY_GIFT" class="activity-gift" :style="renderStyle('ACTIVIY_GIFT')">
|
|
<div ref="ACTIVIY_GIFT_TITLE" :style="renderStyle('ACTIVIY_GIFT_TITLE')" class="title">{{ getLangText('ACTIVIY_GIFT_TITLE') }}</div>
|
|
<div class="flex-c gift-content">
|
|
<div class="gift">
|
|
<div class="gift-info">
|
|
<div ref="ACTIVIY_GIFT_BODY_GIFT_1" :style="renderStyle('ACTIVIY_GIFT_BODY_GIFT_1')" class="gift-cover flex-c">
|
|
<img src="@/assets/default_img.png" alt="">
|
|
</div>
|
|
<div class="amount flex-c">
|
|
<img v-for="(item, index) in getAttrImgUrls('ACTIVIY_GIFT_BODY_GIFT_1_ICON')" ref="ACTIVIY_GIFT_BODY_GIFT_1_ICON" :key="index" :src="item.url" width="20" style="margin: 0px 5px;" alt="">
|
|
<span ref="ACTIVIY_GIFT_BODY_GIFT_1_TEXT" :style="renderStyle('ACTIVIY_GIFT_BODY_GIFT_1_TEXT')">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gift">
|
|
<div class="gift-info">
|
|
<div ref="ACTIVIY_GIFT_BODY_GIFT_2" :style="renderStyle('ACTIVIY_GIFT_BODY_GIFT_2')" class="gift-cover">
|
|
<img src="@/assets/default_img.png" alt="">
|
|
</div>
|
|
<div class="amount flex-c">
|
|
<img v-for="(item, index) in getAttrImgUrls('ACTIVIY_GIFT_BODY_GIFT_2_ICON')" ref="ACTIVIY_GIFT_BODY_GIFT_2_ICON" :key="index" :src="item.url" width="20" style="margin: 0px 5px;" alt="">
|
|
<span ref="ACTIVIY_GIFT_BODY_GIFT_2_TEXT" :style="renderStyle('ACTIVIY_GIFT_BODY_GIFT_2_TEXT')">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gift">
|
|
<div class="gift-info">
|
|
<div ref="ACTIVIY_GIFT_BODY_GIFT_3" :style="renderStyle('ACTIVIY_GIFT_BODY_GIFT_3')" class="gift-cover">
|
|
<img src="@/assets/default_img.png" alt="">
|
|
</div>
|
|
<div class="amount flex-c">
|
|
<img v-for="(item, index) in getAttrImgUrls('ACTIVIY_GIFT_BODY_GIFT_3_ICON')" ref="ACTIVIY_GIFT_BODY_GIFT_3_ICON" :key="index" :src="item.url" width="20" style="margin: 0px 5px;" alt="">
|
|
<span ref="ACTIVIY_GIFT_BODY_GIFT_3_TEXT" :style="renderStyle('ACTIVIY_GIFT_BODY_GIFT_3_TEXT')">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ref="ACTIVITY_BUT" class="operation-but flex-c">
|
|
<div ref="ACTIVITY_BUT_1" :style="renderStyle(selectedBut === 'WEALTH' ? 'ACTIVITY_BUT' :'ACTIVITY_BUT_1')" class="but" @click="clickBut('WEALTH')">{{ getLangText('ACTIVITY_BUT_1') }}</div>
|
|
<div ref="ACTIVITY_BUT_2" :style="renderStyle(selectedBut === 'CHARM' ? 'ACTIVITY_BUT' :'ACTIVITY_BUT_2')" class="but" @click="clickBut('CHARM')">{{ getLangText('ACTIVITY_BUT_2') }}</div>
|
|
</div>
|
|
</div>
|
|
<div ref="ACTIVITY_BODY" class="content" :style="renderStyle('ACTIVITY_BODY')">
|
|
<div ref="ACTIVITY_BODY_BUT" class="operation-but-child flex-c">
|
|
<div ref="ACTIVITY_BODY_BUT_1" class="but" :style="renderStyle(selectedButChild === 'RANKING' ? 'ACTIVITY_BODY_BUT' :'ACTIVITY_BODY_BUT_1')" @click="clickButChild('RANKING')">{{ getLangText('ACTIVITY_BODY_BUT_1') }}</div>
|
|
<div ref="ACTIVITY_BODY_BUT_2" class="but" :style="renderStyle(selectedButChild === 'REWARD' ? 'ACTIVITY_BODY_BUT' :'ACTIVITY_BODY_BUT_2')" @click="clickButChild('REWARD')">{{ getLangText('ACTIVITY_BODY_BUT_2') }}</div>
|
|
</div>
|
|
<div v-show="selectedButChild === 'RANKING'">
|
|
<div class="ranking">
|
|
<div v-for="index in 4" :key="index" ref="ACTIVITY_BODY_RING" class="ranking-user" :style="renderStyle('ACTIVITY_BODY_RING')">
|
|
<div ref="ACTIVITY_BODY_RING_BAG" class="gold_medal_icon">
|
|
<img v-if="index<4" class="gold_medal" :src="getAttrImgUrls('ACTIVITY_BODY_RING_BAG')[index-1] ? getAttrImgUrls('ACTIVITY_BODY_RING_BAG')[index-1].url : ''">
|
|
<span v-else>{{ index }}</span>
|
|
</div>
|
|
<img ref="ACTIVITY_BODY_RING_AVATAR" class="avatar" src="@/assets/default_avatar.png">
|
|
<div ref="ACTIVITY_BODY_RING_NICKNAME" :style="renderStyle('ACTIVITY_BODY_RING_NICKNAME')" class="nickanme nowrap-ellipsis">用户昵称-1</div>
|
|
<div ref="ACTIVITY_BODY_RING_AMOUNT" :style="renderStyle('ACTIVITY_BODY_RING_AMOUNT')" class="golds nowrap-ellipsis">100.1K</div>
|
|
<img v-for="(imgItem, imgIndex) in getAttrImgUrls('ACTIVITY_BODY_RING_ICON')" ref="ACTIVITY_BODY_RING_ICON" :key="imgIndex" class="gift_pack" :src="imgItem.url">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="selectedButChild==='REWARD'">
|
|
<div ref="ACTIVITY_BODY_REWARD" class="reward-card" :style="renderStyle('ACTIVITY_BODY_REWARD')">
|
|
<div class="title"><div ref="ACTIVITY_BODY_REWARD_TITLE" :style="renderStyle('ACTIVITY_BODY_REWARD_TITLE')" class="border nowrap-ellipsis">TOP 1</div></div>
|
|
<div class="reward">
|
|
<div class="reward-users">
|
|
<img v-for="userItem in 5" :key="userItem" class="avatar" src="@/assets/default_avatar.png">
|
|
</div>
|
|
<div ref="ACTIVITY_BODY_REWARD_CARD">
|
|
<props-card :list="propsCards" :lang="lang" :card-style="cardStyle" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ref="COPYRIGHT" class="copyright" :style="renderStyle('COPYRIGHT')">
|
|
{{ getLangText('COPYRIGHT') }}
|
|
</div>
|
|
<div ref="ACTIVITY_MY" :style="renderStyle('ACTIVITY_MY')" class="flex-user flex-l">
|
|
<img ref="ACTIVITY_MY_AVATAR" class="avatar" src="@/assets/default_avatar.png">
|
|
<div ref="ACTIVITY_MY_NICKNAME" :style="renderStyle('ACTIVITY_MY_NICKNAME')" class="nickname nowrap-ellipsis">用户昵称</div>
|
|
<div ref="ACTIVITY_MY_TEXT" :style="renderStyle('ACTIVITY_MY_TEXT')" class="golds">
|
|
<div class="nowrap-ellipsis">{{ getLangText('ACTIVITY_BUT_1') }}: 100K</div>
|
|
<div class="nowrap-ellipsis">{{ getLangText('ACTIVITY_BUT_2') }}: 100k</div>
|
|
</div>
|
|
<img v-for="(imgItem, imgIndex) in getAttrImgUrls('ACTIVITY_MY_ICON')" ref="ACTIVITY_MY_ICON" :key="imgIndex" class="gift_pack" :src="imgItem.url">
|
|
</div>
|
|
|
|
<el-dialog
|
|
:visible.sync="showRule"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
width="320px"
|
|
:show-close="false"
|
|
:center="true"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<div ref="RULE_CONTENT" class="rule-desc" :style="renderStyle('RULE_CONTENT')">
|
|
<div class="rule-title">
|
|
{{ getLangText('RULE') }}
|
|
</div>
|
|
<div class="rule-content" v-html="getLangText('RULE_CONTENT') " />
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<div ref="RULE_BUTTON" :style="renderStyle('RULE_BUTTON')" class="cursor-pointer" @click="showRule = false">OK</div>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { isArray } from '@/utils'
|
|
import PropsCard from './props-card'
|
|
|
|
export default {
|
|
name: 'PageEditor',
|
|
components: { PropsCard },
|
|
props: {
|
|
lang: {
|
|
type: String,
|
|
require: false,
|
|
default: 'zh'
|
|
},
|
|
selectElId: {
|
|
type: String,
|
|
require: false,
|
|
default: ''
|
|
},
|
|
// { 'elId': {} }
|
|
indexData: {
|
|
type: Object,
|
|
require: true,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
selectedBut: 'CHARM',
|
|
selectedButChild: 'RANKING',
|
|
showRule: false,
|
|
countDowns: [
|
|
{
|
|
block: 'COUNT_DOWN_NUMBER',
|
|
label: 'COUNT_DOWN_TEXT_DAY'
|
|
},
|
|
{
|
|
block: 'COUNT_DOWN_NUMBER',
|
|
label: 'COUNT_DOWN_TEXT_HOURS'
|
|
},
|
|
{
|
|
block: 'COUNT_DOWN_NUMBER',
|
|
label: 'COUNT_DOWN_TEXT_MINUTES'
|
|
},
|
|
{
|
|
block: 'COUNT_DOWN_NUMBER',
|
|
label: 'COUNT_DOWN_TEXT_SECONDS'
|
|
}
|
|
],
|
|
imgUrlBase: 'http://img.sugartimeapp.com',
|
|
propsCards: [
|
|
{
|
|
'id': '1493107873717178369',
|
|
'groupId': '1493103725420498945',
|
|
'type': 'PROPS',
|
|
'detailType': 'NOBLE_VIP',
|
|
'content': '1403650373974679654',
|
|
'sort': 1,
|
|
'cover': 'http://img.sugartimeapp.com/svga_cover/manager-3501b436-785c-414c-86bf-ffa64d833805.png',
|
|
'quantity': 7,
|
|
'amount': '231000'
|
|
},
|
|
{
|
|
'id': '1493107873717178370',
|
|
'groupId': '1493103725420498945',
|
|
'type': 'BADGE',
|
|
'detailType': 'BADGE',
|
|
'content': '1476808638933434369',
|
|
'sort': 2,
|
|
'cover': 'http://img.sugartimeapp.com/other/manager-421e05f8-0431-4fd1-b7b0-198c18f93bb6.png',
|
|
'quantity': 7,
|
|
'amount': '0'
|
|
},
|
|
{
|
|
'id': '1493107873717178371',
|
|
'groupId': '1493103725420498945',
|
|
'type': 'PROPS',
|
|
'detailType': 'AVATAR_FRAME',
|
|
'content': '1493101108250304513',
|
|
'sort': 3,
|
|
'cover': 'http://img.sugartimeapp.com/svga_cover/manager-f8fa5f45-36f1-4708-bf8f-815372334a26.png',
|
|
'quantity': 7,
|
|
'amount': '69993'
|
|
},
|
|
{
|
|
'id': '1493107873717178372',
|
|
'groupId': '1493103725420498945',
|
|
'type': 'PROPS',
|
|
'detailType': 'RIDE',
|
|
'content': '1466716137258098690',
|
|
'sort': 4,
|
|
'cover': 'http://img.sugartimeapp.com/svga_cover/manager-65434a8e-a8ca-4000-a7c7-57d052e3f165.png',
|
|
'quantity': 7,
|
|
'amount': '699993'
|
|
}
|
|
],
|
|
cardStyle: {
|
|
cardStyle: '',
|
|
topStyle: '',
|
|
centerStyle: '',
|
|
bottomStyle: ''
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
dirVal() {
|
|
return this.lang === 'ar' ? 'rtl' : 'ltr'
|
|
}
|
|
},
|
|
watch: {
|
|
selectElId: {
|
|
handler(newVal) {
|
|
this.switchSeletBorder(newVal)
|
|
this.showRule = newVal === 'RULE_CONTENT' || newVal === 'RULE_BUTTON'
|
|
this.selectedButChild = newVal && newVal.startsWith('ACTIVITY_BODY_REWARD') ? 'REWARD' : 'RANKING'
|
|
},
|
|
immediate: true
|
|
},
|
|
indexData: {
|
|
handler(newVal) {
|
|
this.cardStyle = {
|
|
cardStyle: this.renderStyle('ACTIVITY_BODY_REWARD_CARD'),
|
|
topStyle: this.renderStyle('ACTIVITY_BODY_REWARD_CARD_TOP'),
|
|
centerStyle: this.renderStyle('ACTIVITY_BODY_REWARD_CARD_CENTER'),
|
|
bottomStyle: this.renderStyle('ACTIVITY_BODY_REWARD_CARD_BOTTOM')
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
methods: {
|
|
getLangText(elId) {
|
|
const that = this
|
|
const elData = that.indexData[elId]
|
|
if (!elData) {
|
|
return ''
|
|
}
|
|
|
|
const attr = elData.attr
|
|
if (!attr) {
|
|
return ''
|
|
}
|
|
|
|
const copywriting = elData.attr.copywriting
|
|
if (!copywriting) {
|
|
return ''
|
|
}
|
|
const i18n = copywriting.i18n
|
|
if (!i18n) {
|
|
return
|
|
}
|
|
for (let index = 0; index < i18n.length; index++) {
|
|
const i18nItem = i18n[index]
|
|
if (i18nItem.lang === that.lang) {
|
|
return i18nItem.value
|
|
}
|
|
}
|
|
|
|
for (let index = 0; index < i18n.length; index++) {
|
|
const i18nItem = i18n[index]
|
|
if (i18nItem.lang === 'en') {
|
|
return i18nItem.value
|
|
}
|
|
}
|
|
return ''
|
|
},
|
|
getAttrImgUrls(elId) {
|
|
const that = this
|
|
const elData = that.indexData[elId]
|
|
if (!elData) {
|
|
return []
|
|
}
|
|
|
|
const attr = elData.attr
|
|
if (!attr) {
|
|
return []
|
|
}
|
|
return attr.imgUrls || []
|
|
},
|
|
renderStyle(elId) {
|
|
const that = this
|
|
const elData = that.indexData[elId]
|
|
if (!elData) {
|
|
return ''
|
|
}
|
|
|
|
const style = elData.style
|
|
if (!style) {
|
|
return ''
|
|
}
|
|
|
|
const { background, font, border } = style
|
|
let styleValue = ''
|
|
if (background) {
|
|
const { img, color } = background
|
|
if (img) {
|
|
const { url, repeat, size } = img
|
|
if (url) {
|
|
styleValue += `background-image: url(${url});`
|
|
if (repeat) {
|
|
styleValue += `background-repeat: ${repeat};`
|
|
}
|
|
if (size) {
|
|
styleValue += `background-size: ${size};`
|
|
}
|
|
}
|
|
}
|
|
|
|
if (color) {
|
|
const { start, direction, end } = color
|
|
if ((!img || !img.url) && (start && direction !== 'NONE' && end)) {
|
|
styleValue += `background-image: linear-gradient(${direction}, ${start} 0%, ${end} 100%);`
|
|
} else if ((!direction || direction === 'NONE') && (start || end)) {
|
|
styleValue += `background-color: ${start || end};`
|
|
}
|
|
}
|
|
}
|
|
|
|
if (font) {
|
|
const { color, size, weight } = font
|
|
if (color) {
|
|
styleValue += `color: ${color};`
|
|
}
|
|
if (size) {
|
|
styleValue += `font-size: ${size};`
|
|
}
|
|
if (weight) {
|
|
styleValue += `font-weight: ${weight};`
|
|
}
|
|
}
|
|
|
|
if (border) {
|
|
const { width, color, style, radius } = border
|
|
if (width) {
|
|
styleValue += `border-width: ${width};`
|
|
}
|
|
if (color) {
|
|
styleValue += `border-color: ${color};`
|
|
}
|
|
if (style) {
|
|
styleValue += `border-style: ${style};`
|
|
}
|
|
if (radius) {
|
|
styleValue += `border-radius: ${radius};`
|
|
}
|
|
}
|
|
return styleValue
|
|
},
|
|
clickBut(type) {
|
|
this.selectedBut = type
|
|
},
|
|
clickButChild(type) {
|
|
this.selectedButChild = type
|
|
},
|
|
goAnchor(selector) {
|
|
document.querySelector(selector).scrollIntoView({
|
|
behavior: 'smooth'
|
|
})
|
|
},
|
|
switchSeletBorder(elId) {
|
|
const that = this
|
|
|
|
that.$nextTick(() => {
|
|
const refs = that.$refs
|
|
if (refs) {
|
|
for (const key in refs) {
|
|
const ref = refs[key]
|
|
if (isArray(ref)) {
|
|
ref.forEach(el => {
|
|
if (that.existSelectedBorderClassName(el.className)) {
|
|
el.className = el.className.replaceAll('selected-border', '').trim()
|
|
}
|
|
})
|
|
continue
|
|
}
|
|
|
|
if (that.existSelectedBorderClassName(ref.className)) {
|
|
ref.className = ref.className.replaceAll('selected-border', '').trim()
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!elId) {
|
|
return
|
|
}
|
|
that.switchSeletBorderClassName(elId)
|
|
})
|
|
},
|
|
existSelectedBorderClassName(className) {
|
|
return className && String(className).indexOf('selected-border') >= 0
|
|
},
|
|
switchSeletBorderClassName(elId) {
|
|
const refs = this.$refs
|
|
if (elId.startsWith('ACTIVITY_BODY_REWARD_CARD')) {
|
|
elId = 'ACTIVITY_BODY_REWARD_CARD'
|
|
}
|
|
const ref = refs[elId]
|
|
if (!ref) {
|
|
return
|
|
}
|
|
if (isArray(ref)) {
|
|
ref.forEach(el => {
|
|
el.className = el.className ? el.className + ' selected-border' : 'selected-border'
|
|
})
|
|
return
|
|
}
|
|
ref.className = ref.className ? ref.className + ' selected-border' : 'selected-border'
|
|
},
|
|
getRewardUserSize(item) {
|
|
if (!item) {
|
|
return 0
|
|
}
|
|
const rex = /\d+/
|
|
if (item.indexOf('~') >= 0) {
|
|
const nums = item.split('~')
|
|
const first = rex.test(nums[0]) ? nums[0] : 0
|
|
const last = rex.test(nums[1]) ? nums[1] : 0
|
|
const num = Number(last) - Number(first)
|
|
return num >= 0 ? num : 0
|
|
}
|
|
if (!rex.test(item)) {
|
|
return 0
|
|
}
|
|
return Number(item)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.template-layout {
|
|
.el-dialog__body {
|
|
padding: 0rem !important;
|
|
}
|
|
.el-dialog__header {
|
|
padding: 0rem !important;
|
|
}
|
|
.el-dialog__footer {
|
|
padding: 0rem !important;
|
|
line-height: .8rem;
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.template-layout {
|
|
position: relative;
|
|
min-height: 100%;
|
|
font-family: PingFangSC-Medium;
|
|
padding-bottom: 1rem;
|
|
// background: #392110;
|
|
cursor: pointer;
|
|
.head {
|
|
position: relative;
|
|
.top {
|
|
position: relative;
|
|
height: 10rem;
|
|
// background-image: url("#{$img-base-url}/web/aswat_king_queen_bg.png");
|
|
// background-size: cover;
|
|
// background-repeat: no-repeat;
|
|
overflow: hidden;
|
|
.rule {
|
|
// color: #FFFFFF;
|
|
// background-image: linear-gradient(180deg, #E22123 0%, #F98F48 100%);
|
|
line-height: .8rem;
|
|
min-width: 1.8rem;
|
|
text-align: center;
|
|
// border-radius: 1rem;
|
|
position: absolute;
|
|
right: -.35rem;
|
|
top: 5.8rem;
|
|
cursor: pointer;
|
|
}
|
|
.layout-count-down {
|
|
position: absolute;
|
|
left: 0rem;
|
|
right: 0rem;
|
|
bottom: 1.1rem;
|
|
text-align: center;
|
|
.count-down {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
// color: #FFFFFF;
|
|
padding: .3rem 0rem;
|
|
// background: #8D0502;
|
|
min-width: 50%;
|
|
max-width: 100%;
|
|
// border-radius: .1rem;
|
|
// border: .02rem solid #FFFFFF;
|
|
.count-down-text {
|
|
padding: 0px .3rem;
|
|
.label {
|
|
// color: #fff8db;
|
|
margin-top: .15rem;
|
|
}
|
|
.block {
|
|
width: 1.11rem;
|
|
height: 1.11rem;
|
|
padding: .08rem .2rem;
|
|
|
|
// color: #FFFFFF;
|
|
text-align: center;
|
|
// background-image: linear-gradient(#FDCC4C, #F86711);
|
|
// border-radius: .1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.activity-gift {
|
|
// border: .02rem solid #d3be87;
|
|
// border-radius: .1rem;
|
|
width: 95%;
|
|
margin: -.5rem auto .1rem auto;
|
|
color: #d3be87;
|
|
padding: .2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
.title {
|
|
// border: .02rem solid #d3be87;
|
|
// background-color: #392110;
|
|
//border-radius: .1rem;
|
|
padding: .2rem;
|
|
width: 50%;
|
|
text-align: center;
|
|
margin: -.6rem auto;
|
|
}
|
|
.gift-content {
|
|
padding: .8rem .05rem .05rem .05rem;
|
|
.gift {
|
|
.gift-info {
|
|
margin: 15px;
|
|
.gift-cover {
|
|
// border: .02rem solid #d3be87;
|
|
// border-radius: .1rem;
|
|
padding: .15rem;
|
|
img {
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
}
|
|
}
|
|
.amount {
|
|
text-align: center;
|
|
padding: .1rem;
|
|
span {
|
|
padding: 0rem .05rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.operation-but {
|
|
padding: .5rem 0rem;
|
|
.but {
|
|
// border: .05rem solid #FFFFFF;
|
|
// border-radius: .4rem;
|
|
padding: .2rem;
|
|
// color: #FFFFFF;
|
|
margin: 0rem .2rem;
|
|
cursor: pointer;
|
|
min-width: 4rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
width: 95%;
|
|
padding: .4rem;
|
|
margin: .2rem auto auto auto;
|
|
// background: #1F1209;
|
|
// border-top-left-radius: .5rem;
|
|
// border-top-right-radius: .5rem;
|
|
.operation-but-child {
|
|
// border: .01rem solid #FFFFFF;
|
|
width: 60%;
|
|
margin: auto auto .5rem auto;
|
|
border-radius: .1rem;
|
|
overflow: hidden;
|
|
.but {
|
|
padding: .2rem;
|
|
// color: #FFFFFF;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.reward-card {
|
|
// background-color: #2b221b;
|
|
// border-radius: .1rem;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
margin: 1rem 0rem;
|
|
.title {
|
|
position: absolute;
|
|
top: -.4rem;
|
|
width: 100%;
|
|
// color: #FFFFFF;
|
|
text-align: center;
|
|
.border {
|
|
// border: .02rem solid #D3BE87;
|
|
//border-radius: .1rem;
|
|
background: #392110;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
padding: .2rem;
|
|
min-width: 50%;
|
|
}
|
|
}
|
|
.reward {
|
|
height: 100%;
|
|
padding: .66rem .36rem .3rem .36rem;
|
|
.reward-users {
|
|
img {
|
|
width: .6rem;
|
|
height: .6rem;
|
|
margin: .1rem;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ranking {
|
|
border-radius: .1rem;
|
|
.ranking-user {
|
|
padding: .2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-bottom: .23rem;
|
|
// background: #392110;
|
|
// border: .02rem solid #D3BE87;
|
|
// border-radius: .2rem;
|
|
.avatar {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin: 0rem .2rem;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
}
|
|
.nickanme {
|
|
width: 45%;
|
|
// color: #FFFFFF;
|
|
}
|
|
.golds {
|
|
// color: #DCC79C;
|
|
padding: 0px .2rem;
|
|
width: 25%;
|
|
}
|
|
.gold_medal_icon {
|
|
width: 30px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #DCC79C;
|
|
}
|
|
.gold_medal {
|
|
width: .6rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.gift_pack {
|
|
flex-shrink: 0;
|
|
width: .6rem;
|
|
height: .6rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rule-desc {
|
|
.rule-title {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
// color: #FFFFFF;
|
|
padding: .2rem;
|
|
// background: #1f1309;
|
|
.rule-content {
|
|
line-height: .6rem;
|
|
}
|
|
}
|
|
|
|
.flex-user {
|
|
position: absolute;
|
|
// background: linear-gradient(138deg, #967245 0%, #1f1309 100%);
|
|
bottom: 0px;
|
|
width: 100%;
|
|
// color: #FFFFFF;
|
|
border-top-left-radius: .3rem;
|
|
border-top-right-radius: .3rem;
|
|
padding: .2rem .1rem;
|
|
.avatar {
|
|
margin: 0rem .2rem;
|
|
flex-shrink: 0;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
}
|
|
.nickname {
|
|
// color: #FFFFFF;
|
|
width: 70%
|
|
}
|
|
.golds {
|
|
width: 30%;
|
|
// color: #FFFFFF;
|
|
padding: 0rem .2rem;
|
|
text-align: left;
|
|
}
|
|
.gift_pack {
|
|
flex-shrink: 0;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
.copyright {
|
|
padding: 1rem .2rem;
|
|
text-align: center;
|
|
// color: #DCC79C;
|
|
// font-weight: bold;
|
|
}
|
|
.but-select {
|
|
background: #FFFFFF;
|
|
color: #8D0502 !important;
|
|
}
|
|
}
|
|
.selected-border {
|
|
border: 2px dashed #FF9326 !important;
|
|
}
|
|
</style>
|