feat: 初始化项目
This commit is contained in:
王天骄
@@ -0,0 +1,658 @@
|
||||
<template>
|
||||
<ChatPage
|
||||
v-if="showChatPage"
|
||||
:case-item="caseItem"
|
||||
@open-settings="emit('open-settings')"
|
||||
@open-profile="emit('open-profile')"
|
||||
@go-home="emit('go-home')"
|
||||
/>
|
||||
<view v-else class="scenario-page">
|
||||
<view class="scenario-shell">
|
||||
<view class="hero">
|
||||
<image class="hero-image" src="/static/config-hospital.png" mode="aspectFill"></image>
|
||||
<view class="hero-fade"></view>
|
||||
</view>
|
||||
|
||||
<view class="director-row">
|
||||
<view class="director-avatar">
|
||||
<image class="director-image" src="/static/config-doctor.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="speech-bubble">
|
||||
<text>欢迎回来！请根据您的教学目标配置临床场景。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="config-scroll" scroll-y>
|
||||
<view class="selected-case">
|
||||
<text class="case-label">当前病例</text>
|
||||
<text class="case-title">{{ currentCaseTitle }}</text>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">
|
||||
<view class="star-icon"></view>
|
||||
<text>王主任推荐</text>
|
||||
</view>
|
||||
<view class="recommend-list">
|
||||
<button
|
||||
v-for="item in recommendations"
|
||||
:key="item.id"
|
||||
class="recommend-card"
|
||||
:class="{ active: selectedRecommendationId === item.id }"
|
||||
@click="applyRecommendation(item)"
|
||||
>
|
||||
<view class="recommend-head">
|
||||
<text class="recommend-icon">{{ item.tags[0] }}</text>
|
||||
<text class="recommend-title">{{ item.title }}</text>
|
||||
</view>
|
||||
<text class="recommend-desc">{{ item.desc }}</text>
|
||||
<view class="tag-row">
|
||||
<text
|
||||
v-for="tag in item.tags"
|
||||
:key="tag"
|
||||
class="tag"
|
||||
:class="{ danger: tag === '急躁' }"
|
||||
>
|
||||
{{ tag }}
|
||||
</text>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section custom-section">
|
||||
<view class="section-title">
|
||||
<view class="tune-icon"></view>
|
||||
<text>自定义配置</text>
|
||||
</view>
|
||||
|
||||
<view class="option-block">
|
||||
<view class="option-label">
|
||||
<view class="location-icon"></view>
|
||||
<text>就诊环境</text>
|
||||
</view>
|
||||
<view class="option-grid grid-3">
|
||||
<button
|
||||
v-for="option in options.environments"
|
||||
:key="option.value"
|
||||
class="choice"
|
||||
:class="{ selected: form.environment === option.value }"
|
||||
@click="selectOption('environment', option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="option-block">
|
||||
<view class="option-label">
|
||||
<view class="cake-icon"></view>
|
||||
<text>年龄段</text>
|
||||
</view>
|
||||
<view class="option-grid grid-4">
|
||||
<button
|
||||
v-for="option in options.ageGroups"
|
||||
:key="option.value"
|
||||
class="choice small"
|
||||
:class="{ selected: form.ageGroup === option.value }"
|
||||
@click="selectOption('ageGroup', option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="option-block">
|
||||
<view class="option-label">
|
||||
<view class="school-icon"></view>
|
||||
<text>文化程度</text>
|
||||
</view>
|
||||
<view class="option-grid grid-3">
|
||||
<button
|
||||
v-for="option in options.educations"
|
||||
:key="option.value"
|
||||
class="choice mini"
|
||||
:class="{ selected: form.education === option.value }"
|
||||
@click="selectOption('education', option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="option-block personality-block">
|
||||
<view class="option-label">
|
||||
<view class="mind-icon"></view>
|
||||
<text>性格</text>
|
||||
</view>
|
||||
<view class="option-grid grid-3">
|
||||
<button
|
||||
v-for="option in options.personalities"
|
||||
:key="option.value"
|
||||
class="choice"
|
||||
:class="{ selected: form.personality === option.value }"
|
||||
@click="selectOption('personality', option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="bottom-action">
|
||||
<button class="generate-button" :disabled="generating" @click="handleGenerate">
|
||||
<text>{{ generating ? '正在生成...' : '生成模拟场景' }}</text>
|
||||
<view class="arrow-icon"></view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import type { ClinicalCase } from '../../api/cases'
|
||||
import {
|
||||
createScenarioConfig,
|
||||
fetchScenarioOptions,
|
||||
type ScenarioForm,
|
||||
type ScenarioOptions,
|
||||
type ScenarioRecommendation
|
||||
} from '../../api/scenario'
|
||||
import ChatPage from '../chat/chat.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
caseItem: ClinicalCase | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'open-settings'): void
|
||||
(event: 'open-profile'): void
|
||||
(event: 'go-home'): void
|
||||
}>()
|
||||
|
||||
type ScenarioFormKey = keyof ScenarioForm
|
||||
|
||||
const fallbackOptions: ScenarioOptions = {
|
||||
environments: [],
|
||||
ageGroups: [],
|
||||
educations: [],
|
||||
personalities: []
|
||||
}
|
||||
|
||||
const form = reactive<ScenarioForm>({
|
||||
environment: 'outpatient',
|
||||
ageGroup: 'young',
|
||||
education: 'higher',
|
||||
personality: 'calm'
|
||||
})
|
||||
|
||||
const recommendations = ref<ScenarioRecommendation[]>([])
|
||||
const options = ref<ScenarioOptions>(fallbackOptions)
|
||||
const selectedRecommendationId = ref('')
|
||||
const generating = ref(false)
|
||||
const toastMessage = ref('')
|
||||
const toastVisible = ref(false)
|
||||
const showChatPage = ref(false)
|
||||
|
||||
let toastTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const currentCaseTitle = computed(() => {
|
||||
if (!props.caseItem) return '未选择病例'
|
||||
return `${props.caseItem.title}（${props.caseItem.caseNo}）`
|
||||
})
|
||||
|
||||
function loadScenarioOptions() {
|
||||
fetchScenarioOptions().then(result => {
|
||||
recommendations.value = result.recommendations
|
||||
options.value = result.options
|
||||
})
|
||||
}
|
||||
|
||||
function applyRecommendation(item: ScenarioRecommendation) {
|
||||
selectedRecommendationId.value = item.id
|
||||
Object.assign(form, item.defaults)
|
||||
}
|
||||
|
||||
function selectOption(key: ScenarioFormKey, value: string) {
|
||||
form[key] = value
|
||||
selectedRecommendationId.value = ''
|
||||
}
|
||||
|
||||
function handleGenerate() {
|
||||
if (!props.caseItem) {
|
||||
showToast('请先选择病例')
|
||||
return
|
||||
}
|
||||
|
||||
generating.value = true
|
||||
createScenarioConfig({
|
||||
...form,
|
||||
caseId: props.caseItem.id,
|
||||
caseNo: props.caseItem.caseNo,
|
||||
recommendationId: selectedRecommendationId.value || undefined
|
||||
}).then(result => {
|
||||
uni.setStorageSync('clinical-thinking-scenario', result)
|
||||
showToast('模拟场景已生成')
|
||||
setTimeout(() => {
|
||||
showChatPage.value = true
|
||||
}, 450)
|
||||
}).finally(() => {
|
||||
setTimeout(() => {
|
||||
generating.value = false
|
||||
}, 600)
|
||||
})
|
||||
}
|
||||
|
||||
function showToast(message: string) {
|
||||
if (toastTimer) clearTimeout(toastTimer)
|
||||
toastMessage.value = message
|
||||
toastVisible.value = true
|
||||
uni.showToast({
|
||||
title: message,
|
||||
icon: 'none'
|
||||
})
|
||||
toastTimer = setTimeout(() => {
|
||||
toastVisible.value = false
|
||||
}, 2200)
|
||||
}
|
||||
|
||||
onMounted(loadScenarioOptions)
|
||||
|
||||
onUnmounted(() => {
|
||||
if (toastTimer) clearTimeout(toastTimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
min-height: 100%;
|
||||
background: #f9f9ff;
|
||||
}
|
||||
|
||||
.scenario-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9ff;
|
||||
color: #191c21;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.scenario-shell {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #f9f9ff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
height: 33.333vh;
|
||||
min-height: 245px;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-fade {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, rgba(249, 249, 255, 0), rgba(249, 249, 255, 0.3));
|
||||
}
|
||||
|
||||
.director-row {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: -40px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.director-avatar {
|
||||
flex: 0 0 auto;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.director-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(194, 198, 212, 0.3);
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 10px rgba(25, 28, 33, 0.1);
|
||||
color: #00478d;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.speech-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -9px;
|
||||
top: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #ffffff;
|
||||
border-left: 1px solid rgba(194, 198, 212, 0.3);
|
||||
border-bottom: 1px solid rgba(194, 198, 212, 0.3);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.config-scroll {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
padding: 16px 20px 108px;
|
||||
}
|
||||
|
||||
.selected-case {
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(194, 198, 212, 0.35);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.case-label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: #727783;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.case-title {
|
||||
color: #191c21;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #191c21;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.star-icon,
|
||||
.tune-icon,
|
||||
.location-icon,
|
||||
.cake-icon,
|
||||
.school-icon,
|
||||
.mind-icon,
|
||||
.arrow-icon {
|
||||
background: #00478d;
|
||||
}
|
||||
|
||||
.star-icon,
|
||||
.tune-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.star-icon {
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.7%206.6%207.1.6-5.4%204.6%201.7%206.9L12%2017l-6.1%203.7%201.7-6.9-5.4-4.6%207.1-.6L12%202z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.7%206.6%207.1.6-5.4%204.6%201.7%206.9L12%2017l-6.1%203.7%201.7-6.9-5.4-4.6%207.1-.6L12%202z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
|
||||
.tune-icon {
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%2017v2h6v-2H3zM3%205v2h10V5H3zm10%2016v-2h8v-2h-8v-2h-2v6h2zM7%209v2H3v2h4v2h2V9H7zm14%204v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%2017v2h6v-2H3zM3%205v2h10V5H3zm10%2016v-2h8v-2h-8v-2h-2v6h2zM7%209v2H3v2h4v2h2V9H7zm14%204v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
|
||||
.recommend-list,
|
||||
.custom-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.recommend-card {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 1px solid #c2c6d4;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
text-align: left;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.recommend-card.active {
|
||||
border-color: #00478d;
|
||||
background: rgba(214, 227, 255, 0.46);
|
||||
}
|
||||
|
||||
.recommend-card::after,
|
||||
.choice::after,
|
||||
.generate-button::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.recommend-card:active,
|
||||
.choice:active,
|
||||
.generate-button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.recommend-head {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.recommend-icon {
|
||||
color: #00478d;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.recommend-title {
|
||||
color: #191c21;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.recommend-desc {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #424752;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: #ecedf6;
|
||||
color: #191c21;
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.tag.danger {
|
||||
background: rgba(255, 218, 214, 0.35);
|
||||
color: #ba1a1a;
|
||||
}
|
||||
|
||||
.option-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #424752;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.location-icon,
|
||||
.cake-icon,
|
||||
.school-icon,
|
||||
.mind-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #424752;
|
||||
}
|
||||
|
||||
.location-icon {
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.5%202.5%200%200%201%200%205.5z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.5%202.5%200%200%201%200%205.5z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
|
||||
.cake-icon,
|
||||
.school-icon,
|
||||
.mind-icon {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.option-grid {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.choice {
|
||||
min-width: 0;
|
||||
min-height: 40px;
|
||||
padding: 8px 4px;
|
||||
border: 1px solid #c2c6d4;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
color: #424752;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.choice.small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.choice.mini {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.choice.selected {
|
||||
border-color: #00478d;
|
||||
background: rgba(0, 71, 141, 0.1);
|
||||
color: #00478d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.personality-block {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
box-sizing: border-box;
|
||||
padding: 32px 20px 20px;
|
||||
background: linear-gradient(180deg, rgba(249, 249, 255, 0), #f9f9ff 38%, #f9f9ff);
|
||||
}
|
||||
|
||||
.generate-button {
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
border-radius: 999px;
|
||||
background: #00478d;
|
||||
box-shadow: 0 8px 18px rgba(0, 71, 141, 0.22);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #ffffff;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%204-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%204-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 96px;
|
||||
z-index: 100;
|
||||
max-width: 320px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 999px;
|
||||
background: #2e3037;
|
||||
color: #eff0f8;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 16px);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.toast.visible {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user