728 lines
22 KiB
Vue
728 lines
22 KiB
Vue
|
<template>
|
|||
|
|
<div class="main-container">
|
|||
|
|
<div class="hsd-title">
|
|||
|
|
<!-- <img src="@/assets/img1/logo.svg">-->
|
|||
|
|
<img src="@/assets/orangeUi/logo.svg" />
|
|||
|
|
</div>
|
|||
|
|
<div class="head-cg">
|
|||
|
|
<!-- <img src="@/assets/img1/cg.svg">-->
|
|||
|
|
<img src="@/assets/orangeUi/cg.svg" />
|
|||
|
|
</div>
|
|||
|
|
<div class="main-content">
|
|||
|
|
<div class="main-text">
|
|||
|
|
{{ userInfo.userName }}，您已成功报名！<p
|
|||
|
|
>感谢您参与本次
|
|||
|
|
<em style="font-style: normal; color: red; font-weight: 700">{{ getUserInfo(userInfo.majorId) }}</em> 学科评卷工作！
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="main-icon">
|
|||
|
|
<div class="main-item">
|
|||
|
|
<van-row wrap>
|
|||
|
|
<van-col span="6" v-if="showIcon.show0">
|
|||
|
|
<img @click="show0 = true" src="../assets/imgs/my.svg" alt="" />
|
|||
|
|
<van-dialog
|
|||
|
|
title="个人信息"
|
|||
|
|
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
|
|||
|
|
:show-confirm-button="false"
|
|||
|
|
v-model:show="show0"
|
|||
|
|
>
|
|||
|
|
<div class="tishi">
|
|||
|
|
<van-form @submit="onSubmit">
|
|||
|
|
<van-cell-group inset>
|
|||
|
|
<van-field
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-if="userInfo.userName"
|
|||
|
|
v-model="userInfo.userName"
|
|||
|
|
name="userName"
|
|||
|
|
label="姓名"
|
|||
|
|
type="text"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
readonly
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
v-if="userInfo.identityId"
|
|||
|
|
v-model="userInfo.identityId"
|
|||
|
|
name="userCardId"
|
|||
|
|
label="身份证号"
|
|||
|
|
/>
|
|||
|
|
<!-- <van-field-->
|
|||
|
|
<!-- style="height: 35px; line-height: 100%"-->
|
|||
|
|
<!-- v-model="user.sex"-->
|
|||
|
|
<!-- readonly-->
|
|||
|
|
<!-- name="picker"-->
|
|||
|
|
<!-- label="性别"-->
|
|||
|
|
|
|||
|
|
<!-- />-->
|
|||
|
|
<!-- <van-field-->
|
|||
|
|
<!-- style="height: 35px; line-height: 100%"-->
|
|||
|
|
<!-- readonly-->
|
|||
|
|
<!-- v-model="user.age"-->
|
|||
|
|
<!-- name="age"-->
|
|||
|
|
<!-- label="年龄"-->
|
|||
|
|
<!-- type="text"-->
|
|||
|
|
|
|||
|
|
<!-- />-->
|
|||
|
|
<van-field
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-if="userInfo.phone"
|
|||
|
|
v-model="userInfo.phone"
|
|||
|
|
name="phone"
|
|||
|
|
label="手机号"
|
|||
|
|
type="number"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
v-if="userInfo.jobTitle"
|
|||
|
|
v-model="userInfo.jobTitle"
|
|||
|
|
readonly
|
|||
|
|
name="picker"
|
|||
|
|
label="职称"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-if="userInfo.office"
|
|||
|
|
v-model="userInfo.office"
|
|||
|
|
name="office"
|
|||
|
|
label="职务"
|
|||
|
|
type="text"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-if="userInfo.workName"
|
|||
|
|
v-model="userInfo.workName"
|
|||
|
|
name="workName"
|
|||
|
|
label="单位名称"
|
|||
|
|
type="text"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-if="userInfo.workPhone"
|
|||
|
|
v-model="userInfo.workPhone"
|
|||
|
|
name="workPhoen"
|
|||
|
|
label="单位电话"
|
|||
|
|
type="text"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
v-if="userInfo.pyCard"
|
|||
|
|
readonly
|
|||
|
|
v-model="userInfo.pyCard"
|
|||
|
|
name="pyCard"
|
|||
|
|
label="银行卡号"
|
|||
|
|
type="number"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<van-field
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-if="userInfo.bankAddress"
|
|||
|
|
v-model="userInfo.bankAddress"
|
|||
|
|
name="bankAddress"
|
|||
|
|
label="开户所在地"
|
|||
|
|
type="text"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-if="userInfo.bankName"
|
|||
|
|
v-model="userInfo.bankName"
|
|||
|
|
name="bankName"
|
|||
|
|
label="开户行"
|
|||
|
|
type="text"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-if="userInfo.carStatus === 1"
|
|||
|
|
v-model="userInfo.carNumber"
|
|||
|
|
name="carNumber"
|
|||
|
|
label="车牌号"
|
|||
|
|
type="text"
|
|||
|
|
height="40px"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
name="dormitoryStatus"
|
|||
|
|
v-if="userInfo.dormitoryStatus === 1"
|
|||
|
|
:readonly="true"
|
|||
|
|
style="height: 35px; line-height: 50%"
|
|||
|
|
label="是否住宿"
|
|||
|
|
>
|
|||
|
|
<template #input>
|
|||
|
|
<van-radio-group
|
|||
|
|
checked-color="#8D2328"
|
|||
|
|
style="height: 35px; line-height: 50%"
|
|||
|
|
v-model="userInfo.dormitoryStatus"
|
|||
|
|
direction="horizontal"
|
|||
|
|
>
|
|||
|
|
<!-- <van-radio name="1">是</van-radio>-->
|
|||
|
|
<!-- <van-radio name="0">否</van-radio>-->
|
|||
|
|
{{ userInfo.dormitoryStatus === 1 ? '是' : '否' }}
|
|||
|
|
</van-radio-group>
|
|||
|
|
</template>
|
|||
|
|
</van-field>
|
|||
|
|
<van-field
|
|||
|
|
v-if="userInfo.studentId"
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-model="userInfo.studentId"
|
|||
|
|
name="studentId"
|
|||
|
|
label="学号"
|
|||
|
|
type="text"
|
|||
|
|
height="40px"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
v-if="userInfo.teacherId"
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-model="userInfo.teacherId"
|
|||
|
|
name="teacherId"
|
|||
|
|
label="工号"
|
|||
|
|
type="text"
|
|||
|
|
height="40px"
|
|||
|
|
/>
|
|||
|
|
<van-field
|
|||
|
|
v-if="userInfo.mealCard"
|
|||
|
|
style="height: 35px; line-height: 100%"
|
|||
|
|
readonly
|
|||
|
|
v-model="userInfo.mealCard"
|
|||
|
|
name="teacherId"
|
|||
|
|
label="饭卡"
|
|||
|
|
type="text"
|
|||
|
|
height="40px"
|
|||
|
|
/>
|
|||
|
|
</van-cell-group>
|
|||
|
|
</van-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<span class="dialog-close-content" @click="show0 = false">×</span>
|
|||
|
|
</van-dialog>
|
|||
|
|
<p>我的信息</p>
|
|||
|
|
</van-col>
|
|||
|
|
|
|||
|
|
<van-col span="6" v-if="showIcon.show1">
|
|||
|
|
<img @click="show1 = true" src="../assets/imgs/ditu.svg" alt="" />
|
|||
|
|
<div class="ditu-img" v-if="show1">
|
|||
|
|
<span @click="show1 = false"> 关闭 ✕ </span>
|
|||
|
|
<div class="card-img">
|
|||
|
|
<img src="@/assets/orangeUi/ditu.jpg" style="width: 100%; height: 100%" alt="师大地图" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p>师大地图</p>
|
|||
|
|
</van-col>
|
|||
|
|
|
|||
|
|
<van-col span="6" v-if="showIcon.show2">
|
|||
|
|
<img @click="show2 = true" src="@/assets/imgs/txz.svg" alt="" />
|
|||
|
|
<div class="txz-img" v-if="show2">
|
|||
|
|
<span @click="show2 = false"> 关闭 ✕ </span>
|
|||
|
|
<!-- <div class="card-pai">黑A·35648</div>-->
|
|||
|
|
<div class="card-pai">{{ carNum() }}</div>
|
|||
|
|
<div class="card-tishi">该车辆为评卷教师车辆，已向学校报备，请放行！</div>
|
|||
|
|
</div>
|
|||
|
|
<p>通行证</p>
|
|||
|
|
</van-col>
|
|||
|
|
|
|||
|
|
<van-col span="6" v-if="showIcon.show3">
|
|||
|
|
<img @click="showGroup" src="@/assets/imgs/fenzu.svg" alt="" />
|
|||
|
|
<van-dialog
|
|||
|
|
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
|
|||
|
|
:show-confirm-button="false"
|
|||
|
|
:show-cancel-button="false"
|
|||
|
|
v-model:show="show3"
|
|||
|
|
>
|
|||
|
|
<span class="dialog-close-content" @click="show3 = false">×</span>
|
|||
|
|
<div class="grop-by">
|
|||
|
|
分组信息
|
|||
|
|
<p v-if="!group">暂时未分组</p>
|
|||
|
|
<p v-else>{{ group }}</p>
|
|||
|
|
</div>
|
|||
|
|
</van-dialog>
|
|||
|
|
<p>所属分组</p>
|
|||
|
|
</van-col>
|
|||
|
|
<van-col span="6" v-if="showIcon.show4">
|
|||
|
|
<img @click="show4 = true" src="@/assets/imgs/sushi.svg" alt="" />
|
|||
|
|
<van-dialog
|
|||
|
|
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
|
|||
|
|
:show-confirm-button="false"
|
|||
|
|
:show-cancel-button="false"
|
|||
|
|
v-model:show="show4"
|
|||
|
|
>
|
|||
|
|
<span class="dialog-close-content" @click="show4 = false">×</span>
|
|||
|
|
<div class="grop-by">
|
|||
|
|
宿舍分配
|
|||
|
|
<p v-if="!store.LoginUser.dormitory">暂时未分配</p>
|
|||
|
|
<p v-else>{{ store.LoginUser.dormitory }}</p>
|
|||
|
|
</div>
|
|||
|
|
</van-dialog>
|
|||
|
|
<p>宿舍</p>
|
|||
|
|
</van-col>
|
|||
|
|
<van-col span="6" v-if="showIcon.show5">
|
|||
|
|
<img @click="show5 = true" src="@/assets/imgs/didian.svg" alt="" />
|
|||
|
|
<van-dialog
|
|||
|
|
:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
|
|||
|
|
:show-confirm-button="false"
|
|||
|
|
:show-cancel-button="false"
|
|||
|
|
v-model:show="show5"
|
|||
|
|
>
|
|||
|
|
<div class="grop-by">
|
|||
|
|
评卷地点信息
|
|||
|
|
<p>暂时未发布</p>
|
|||
|
|
<!-- <p v-if="!group">暂时未发布</p>-->
|
|||
|
|
<!-- <p v-else>{{ group }}</p>-->
|
|||
|
|
</div>
|
|||
|
|
<!-- <img src="@/assets/img/dt.jpg"/>-->
|
|||
|
|
<span class="dialog-close-content" @click="show5 = false">×</span>
|
|||
|
|
</van-dialog>
|
|||
|
|
<p>评卷地点</p>
|
|||
|
|
</van-col>
|
|||
|
|
|
|||
|
|
<van-col span="6">
|
|||
|
|
<img @click="show6 = true" src="@/assets/imgs/xysh.svg" alt="" />
|
|||
|
|
<div class="xysh-img" :class="handoffValue" v-if="show6" @click="toggleShow">
|
|||
|
|
<span @click="show6 = false"> 关闭 ✕ </span>
|
|||
|
|
<!-- <em class="em-next"></em>-->
|
|||
|
|
</div>
|
|||
|
|
<p>校园生活</p>
|
|||
|
|
</van-col>
|
|||
|
|
|
|||
|
|
<van-col span="6" v-if="showIcon.show7">
|
|||
|
|
<img @click="show7 = true" src="../assets/imgs/zhixie.svg" alt="" />
|
|||
|
|
<div class="zhixie-img" v-if="show7">
|
|||
|
|
<span @click="show7 = false"> 关闭 ✕ </span>
|
|||
|
|
<div class="card-img">
|
|||
|
|
<img src="@/assets/orangeUi/zhixie.jpg" style="width: 100%; height: 100%" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p>致谢</p>
|
|||
|
|
</van-col>
|
|||
|
|
|
|||
|
|
<!-- <van-col span="6" v-if="showIcon.show8">-->
|
|||
|
|
<!-- <img @click="show8 = true" src="@/assets/imgs/zz.svg" alt="">-->
|
|||
|
|
<!-- <van-dialog-->
|
|||
|
|
<!-- style="height: 80%;"-->
|
|||
|
|
<!-- :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"-->
|
|||
|
|
<!-- :show-confirm-button="false"-->
|
|||
|
|
<!-- cancel-button-text="长按图片保存"-->
|
|||
|
|
<!-- cancel-button-color="#e34032"-->
|
|||
|
|
<!-- v-model:show="show8" show-cancel-button>-->
|
|||
|
|
<!-- <img src="@/assets/img/ryzs.png"/>-->
|
|||
|
|
<!-- <span class="dialog-close-content" @click="show8 = false">×</span>-->
|
|||
|
|
<!-- </van-dialog>-->
|
|||
|
|
<!-- <p>证书</p>-->
|
|||
|
|
<!-- </van-col>-->
|
|||
|
|
</van-row>
|
|||
|
|
|
|||
|
|
<div class="main-bottom">
|
|||
|
|
<!-- <img src="@/assets/img/bottom.png">-->
|
|||
|
|
<!-- <img src="@/assets/img1/footer1.svg" >-->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer">
|
|||
|
|
<!-- <img class="bot-img" src="@/assets/img1/footer3.svg" >-->
|
|||
|
|
<img class="bot-img" src="@/assets/orangeUi/footer_cg.svg" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { onMounted, reactive, ref } from 'vue';
|
|||
|
|
import { useUserStore } from '@/store';
|
|||
|
|
import { getUser, getGroupName } from '@/api';
|
|||
|
|
|
|||
|
|
const store = useUserStore();
|
|||
|
|
const show0 = ref(false);
|
|||
|
|
const show1 = ref(false);
|
|||
|
|
const show2 = ref(false);
|
|||
|
|
const show3 = ref(false);
|
|||
|
|
const show4 = ref(false);
|
|||
|
|
const show5 = ref(false);
|
|||
|
|
const show6 = ref(false);
|
|||
|
|
const show7 = ref(false);
|
|||
|
|
const show8 = ref(false);
|
|||
|
|
const showDitu = ref(false);
|
|||
|
|
const handoff = ref(false);
|
|||
|
|
const handoffValue = ref('xysh-img1');
|
|||
|
|
|
|||
|
|
function toggleShow() {
|
|||
|
|
if (handoff.value) {
|
|||
|
|
handoffValue.value = 'xysh-img2';
|
|||
|
|
handoff.value = false;
|
|||
|
|
} else {
|
|||
|
|
handoffValue.value = 'xysh-img1';
|
|||
|
|
handoff.value = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const user = store.LoginUser;
|
|||
|
|
/*
|
|||
|
|
* 1. 获取用户信息
|
|||
|
|
* 2. 获取用户分组信息
|
|||
|
|
* 3. 获取用户宿舍信息
|
|||
|
|
* 4. 获取用户评卷地点信息
|
|||
|
|
* 5. 获取用户校园生活信息
|
|||
|
|
* 6. 获取用户致谢信息
|
|||
|
|
* 7. 获取用户证书信息
|
|||
|
|
* */
|
|||
|
|
const group = ref('');
|
|||
|
|
const showIcon = reactive({
|
|||
|
|
show0: false,
|
|||
|
|
show1: false,
|
|||
|
|
show2: false,
|
|||
|
|
show3: false,
|
|||
|
|
show4: false,
|
|||
|
|
show5: false,
|
|||
|
|
show6: false,
|
|||
|
|
show7: false,
|
|||
|
|
show8: false,
|
|||
|
|
});
|
|||
|
|
let userInfo = reactive({
|
|||
|
|
userName: '', // 用户名
|
|||
|
|
majorId: 0, // 专业ID
|
|||
|
|
phone: '', // 手机号
|
|||
|
|
studentId: '', // 学号
|
|||
|
|
groupId: 0, // 分组ID
|
|||
|
|
teacherId: '', // 工号
|
|||
|
|
jobTitle: '', // 职称
|
|||
|
|
identityId: '', // 身份证号
|
|||
|
|
office: '', // 职务
|
|||
|
|
workName: '', // 单位名称
|
|||
|
|
workPhone: '', // 单位电话
|
|||
|
|
pyCard: '', // 银行卡号
|
|||
|
|
bankAddress: '', // 开户所在地
|
|||
|
|
bankName: '', // 开户行
|
|||
|
|
carNumber: '', // 车牌号
|
|||
|
|
dormitoryStatus: 0, // 是否住宿（1：是，0：否）
|
|||
|
|
mealCard: '', // 饭卡
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const showGroup = () => {
|
|||
|
|
show3.value = true;
|
|||
|
|
getGroupName(userInfo.groupId).then(
|
|||
|
|
(res) => {
|
|||
|
|
group.value = res.result;
|
|||
|
|
},
|
|||
|
|
(err) => {
|
|||
|
|
console.log(err);
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
const carNum = () => {
|
|||
|
|
let carNum = userInfo.carNumber;
|
|||
|
|
if (carNum) {
|
|||
|
|
var s = carNum.substring(0, 2);
|
|||
|
|
var s1 = carNum.substring(2);
|
|||
|
|
return s + '·' + s1;
|
|||
|
|
} else {
|
|||
|
|
return '暂没有车牌号';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 页面加载时获取用户信息
|
|||
|
|
onMounted(() => {
|
|||
|
|
getUser(store.getUserId).then(
|
|||
|
|
(res) => {
|
|||
|
|
console.log('获取到的用户信息', res);
|
|||
|
|
Object.assign(userInfo, res.result.user); // 使用 Object.assign 更新属性
|
|||
|
|
// console.log( store.LoginUser.majorId)
|
|||
|
|
store.setMajorId(store.LoginUser.majorId);
|
|||
|
|
Object.assign(showIcon, res.result);
|
|||
|
|
},
|
|||
|
|
(err) => {
|
|||
|
|
console.log(err);
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function getUserInfo(majorId: number) {
|
|||
|
|
let majorName = '';
|
|||
|
|
majors.forEach((item) => {
|
|||
|
|
if (item.value === majorId) {
|
|||
|
|
majorName = item.name;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return majorName;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const majors = [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: '语文',
|
|||
|
|
value: 1,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: '地理',
|
|||
|
|
value: 4,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
name: '历史',
|
|||
|
|
value: 7,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
name: '政治',
|
|||
|
|
value: 8,
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
</script>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.dialog-close-content {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
top: 0;
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 30px;
|
|||
|
|
//background-color: #42b983;
|
|||
|
|
color: #949494;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-container {
|
|||
|
|
height: 100vh;
|
|||
|
|
width: 100vw;
|
|||
|
|
background: url('@/assets/orangeUi/bj5.svg') no-repeat;
|
|||
|
|
//background: url("@/assets/img1/bj.svg") no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
|
|||
|
|
.hsd-title {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 15vh;
|
|||
|
|
padding-top: 5vh;
|
|||
|
|
//border: 1px solid red;
|
|||
|
|
img {
|
|||
|
|
width: 65%;
|
|||
|
|
margin-top: 8vh;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head-cg {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 15vh;
|
|||
|
|
//border: 1px solid black;
|
|||
|
|
img {
|
|||
|
|
margin-top: 5vh;
|
|||
|
|
width: 90%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-content {
|
|||
|
|
margin-top: 10vh;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 10vh;
|
|||
|
|
//border: 1px solid orange;
|
|||
|
|
color: black;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-icon {
|
|||
|
|
width: 97vw;
|
|||
|
|
height: 20vh;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: 5vh;
|
|||
|
|
//border: 1px solid green;
|
|||
|
|
.main-item {
|
|||
|
|
img {
|
|||
|
|
width: 50%;
|
|||
|
|
margin-top: 15%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
margin-top: -5px;
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 20vh;
|
|||
|
|
//border: 1px solid blue;
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grop-by {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100px;
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 100px;
|
|||
|
|
font-size: initial;
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.txz-img {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
//border: 5px solid red;
|
|||
|
|
background-image: url('@/assets/orangeUi/txz.svg');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: cover; /* 修改这里 */
|
|||
|
|
z-index: 999;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
width: 30vw;
|
|||
|
|
//border: 1px solid red;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #262626;
|
|||
|
|
font-size: 20px;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-pai {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 8.5vw;
|
|||
|
|
top: 71vh;
|
|||
|
|
//font-size: 24px;
|
|||
|
|
font-family: 微软雅黑;
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 35px;
|
|||
|
|
height: 2.5rem;
|
|||
|
|
width: 80%;
|
|||
|
|
opacity: 1;
|
|||
|
|
//color: rgba(141, 35, 40, 0.6);
|
|||
|
|
//color: rgba(255, 255, 255, 0.8);
|
|||
|
|
color: white;
|
|||
|
|
|
|||
|
|
font-weight: 600;
|
|||
|
|
border-radius: 132px;
|
|||
|
|
background: rgba(255, 255, 255, 1), rgba(255, 255, 255, 1);
|
|||
|
|
border: 4px solid rgba(255, 255, 255, 0.7);
|
|||
|
|
box-shadow:
|
|||
|
|
0px 0px 0px rgba(0, 0, 0, 0.1),
|
|||
|
|
0px 3px 7px rgba(0, 0, 0, 0.1),
|
|||
|
|
0px 12px 12px rgba(0, 0, 0, 0.09),
|
|||
|
|
0px 27px 16px rgba(0, 0, 0, 0.05),
|
|||
|
|
0px 47px 19px rgba(0, 0, 0, 0.01),
|
|||
|
|
0px 74px 21px rgba(0, 0, 0, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-tishi {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 80vh;
|
|||
|
|
left: 10vw;
|
|||
|
|
text-align: left;
|
|||
|
|
width: 80vw;
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: white;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
text-indent: 34px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//地图
|
|||
|
|
.ditu-img {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
background-color: white;
|
|||
|
|
z-index: 999;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
padding-top: 30%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 80%;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #262626;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zhixie-img {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
background-color: white;
|
|||
|
|
z-index: 999;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
margin-top: 20%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 80%;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #262626;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.xysh-img1 {
|
|||
|
|
background: url('@/assets/orangeUi/xysh1.jpg') no-repeat center center;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.xysh-img2 {
|
|||
|
|
background: url('@/assets/orangeUi/xysh2.jpg') no-repeat center center;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.xysh-img {
|
|||
|
|
//background: url("@/assets/orangeUi/xysh.svg") no-repeat center;
|
|||
|
|
////background-size: cover;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
background-color: white;
|
|||
|
|
//background: url() no-repeat;
|
|||
|
|
.card-img {
|
|||
|
|
//padding-top: 10%;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
width: 30vw;
|
|||
|
|
//border: 1px solid red;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #262626;
|
|||
|
|
font-size: 20px;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 5px;
|
|||
|
|
top: 0;
|
|||
|
|
}
|
|||
|
|
// 下一页
|
|||
|
|
.em-next {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
right: 10px;
|
|||
|
|
/* 将元素向上移动自身高度的一半，以居中对齐 */
|
|||
|
|
//transform: translateY(-50%);
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-width: 20px 20px 0 0; /* 创建一个向右的三角形 */
|
|||
|
|
border-color: #050505 transparent transparent transparent;
|
|||
|
|
transform: rotate(135deg);
|
|||
|
|
/* 箭头颜色为红色，其余部分透明 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|