167 lines
3.4 KiB
Vue
167 lines
3.4 KiB
Vue
<template>
|
|
<div style="position: relative; width: 100%">
|
|
<img :src="whiteBox" alt="" width="100%" style="display: block" />
|
|
<div
|
|
style="
|
|
width: 48%;
|
|
height: 46%;
|
|
border-radius: 12px;
|
|
margin: 2.5%;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
"
|
|
:style="{ backgroundImage }"
|
|
>
|
|
<div
|
|
style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
|
|
>
|
|
<div class="type" :style="{ fontSize }">{{ type }}</div>
|
|
</div>
|
|
</div>
|
|
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 4%">
|
|
<div
|
|
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around"
|
|
>
|
|
<div class="contentTime">{{ date }}</div>
|
|
<div style="display: grid; grid-template-columns: repeat(2, 1fr)">
|
|
<div class="contentText">Target: {{ target }}</div>
|
|
<div class="contentText">Salary: ${{ salary }}</div>
|
|
</div>
|
|
<div style="display: grid; grid-template-columns: repeat(2, 1fr)">
|
|
<div class="contentText">Time(Days):{{ days }}</div>
|
|
<div class="contentText" v-if="income">Total income:{{ income }}</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="more"
|
|
class="moreBt"
|
|
style="position: absolute; bottom: 8%; right: 4%; color: #bb92ff; font-weight: 500"
|
|
@click="btMore"
|
|
>
|
|
More >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
const whiteBox = new URL('../../assets/images/HostCenter/whitebox.png', import.meta.url).href
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
date: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
target: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
salary: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
income: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
days: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
more: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['showMore'])
|
|
const btMore = () => {
|
|
emit('showMore')
|
|
}
|
|
|
|
const backgroundImage = ref('')
|
|
const fontSize = ref('')
|
|
|
|
watch(
|
|
() => props.type,
|
|
(newType) => {
|
|
if (newType == 'In Progress') {
|
|
backgroundImage.value = 'linear-gradient(112deg, #759CFF 5.66%, #3D73FF 42.49%)'
|
|
fontSize.value = '0.9em'
|
|
}
|
|
if (newType == 'Pending') {
|
|
backgroundImage.value = 'linear-gradient(112deg, #FF7578 5.66%, #FF3D40 42.49%)'
|
|
fontSize.value = '1em'
|
|
}
|
|
if (newType == 'Completed') {
|
|
backgroundImage.value = 'linear-gradient(112deg, #75FF98 5.66%, #3DFF54 42.49%)'
|
|
fontSize.value = '1em'
|
|
}
|
|
if (newType == 'Out Of Account') {
|
|
backgroundImage.value = 'linear-gradient(112deg, #BDBDBD 5.66%, #AEAEAE 42.49%)'
|
|
fontSize.value = '0.7em'
|
|
}
|
|
return
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
color: rgba(0, 0, 0, 0.8);
|
|
font-family: 'SF Pro Text';
|
|
font-weight: 700;
|
|
}
|
|
|
|
.type {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.contentTime {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.contentText {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.moreBt {
|
|
font-size: 1em;
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
* {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 360px) {
|
|
* {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
* {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
</style>
|