This commit is contained in:
A1300399510 2023-07-10 19:02:29 +08:00
parent ea2dff01f3
commit ba761c23b9
10 changed files with 416 additions and 247 deletions

View File

@ -1,38 +1,17 @@
<template>
<header-nav v-if="isHeader === 1"></header-nav>
<router-view />
</template>
<script>
import { onMounted, watch, ref, } from 'vue';
import { useRoute } from 'vue-router';
import headerNav from './components/public/head.vue'
export default ({
setup() {
const route = useRoute();
let isHeader = ref(0) // 0 1 2
//
watch(
() => route.path,
(newValue) => {
if (newValue === '/edit') isHeader.value = 1
}
);
return {
isHeader,
route // Vue 3Vue $route
}
},
data() {
return {
};
},
components: {
headerNav
}
})
@ -44,9 +23,14 @@ export default ({
box-sizing: border-box;
}
a {
text-decoration: none;
}
html {
background-color: #eff7ff;
}
img {
object-fit: contain;
}
@ -85,6 +69,10 @@ img {
justify-content: center;
}
.wid1200 {
width: 1200px;
}
/* // 全局css 加上以下代码,可以隐藏上下箭头 */
/* // 取消input的上下箭头 */

View File

@ -165,9 +165,6 @@ export default {
}
}
.choice-explain {
color: #555555;
font-size: 14px;

View File

@ -0,0 +1,99 @@
<template>
<div class="flexcenter pop-mask" @click="$emit('close')" v-if="failPopState">
<div class="pop fail-box shadow radius16 flexcenter">
<img class="pop-close" src="@/assets/img/edit/close-icon.svg" />
<img class="fail-icon" src="@/assets/img/edit/fail-icon.png" />
<div class="fail-title">提交失败</div>
<div class="fail-text">已存为草稿</div>
<div class="fail-hint">房源数量已达上限</div>
<div class="fail-hint" style="margin-bottom: 57px;">下架旧房源便可发布新房源</div>
<div class="fail-btn flexcenter">
房源管理<img class="fail-btn-icon" src="@/assets/img/edit/fail-btn-icon.svg" />
</div>
</div>
</div>
</template>
<script>
export default {
props: ["failPopState"],
name: 'GterFangFailPop',
};
</script>
<style lang="less" scoped>
.pop-mask {
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.698039215686274);
z-index: 1000;
}
.pop {
z-index: 2;
background-color: #fff;
position: relative;
.pop-close {
width: 14px;
height: 14px;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
&.fail-box {
width: 500px;
flex-direction: column;
padding-top: 60px;
padding-bottom: 70px;
.fail-icon {
width: 80px;
height: 80px;
margin-bottom: 22px;
}
.fail-title {
color: #333;
font-size: 24px;
font-weight: 650;
margin-bottom: 7px;
}
.fail-text {
color: #aaa;
font-size: 14px;
margin-bottom: 43px;
}
.fail-hint {
color: #555;
font-size: 16px;
margin-bottom: 14px;
}
.fail-btn {
width: 240px;
height: 50px;
background-color: rgba(98, 177, 255, 1);
border-radius: 120px;
font-size: 20px;
color: #fff;
font-weight: 700;
cursor: pointer;
.fail-btn-icon {
width: 24px;
height: 24px;
margin-left: 10px;
}
}
}
}
</style>

View File

@ -0,0 +1,59 @@
<template>
<div class="flexcenter pop-mask" @click="$emit('close')" v-if="howBoxState">
<div class="pop how-box shadow radius16" @click.stop="">
<img class="pop-close" @click.stop="$emit('close')" src="@/assets/img/edit/close-icon.svg" />
<div class="how-title">如何获取微信二维码</div>
<img class="how-img" src="@/assets/img/edit/how-img.svg" />
</div>
</div>
</template>
<script>
export default {
props: ['howBoxState'],
}
</script>
<style lang="less" scoped>
.pop-mask {
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.698039215686274);
z-index: 1000;
}
.pop {
z-index: 2;
background-color: #fff;
.pop-close {
width: 14px;
height: 14px;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
&.how-box {
position: relative;
padding: 40px 45px 40px;
.how-title {
font-size: 20px;
font-weight: 650;
color: #000;
margin-bottom: 32px;
text-align: center;
}
.how-img {
width: 550px;
height: 584px;
}
}
}
</style>

View File

@ -46,9 +46,6 @@ export default {
mounted() {
let that = this
let info = this.info
console.log("info['latitude']", info['latitude']);
if (info['latitude']) {
this.latlng = {
longitude: info['longitude'],

View File

@ -0,0 +1,68 @@
<template>
<section class="index-footer">
<div class="footer-link"><a href="http://about.gter.net/about.html" target="_blank">关于寄托</a> <a
href="http://about.gter.net/ad.html" target="_blank">广告合作</a> <a href="https://www.gter.net/link"
target="_blank">友情链接</a> <a href="http://about.gter.net/disclaimer.html" target="_blank">免责声明</a> <a
href="http://about.gter.net/contact.html" target="_blank">联系我们</a> <a
href="http://about.gter.net/index.html?name=job" target="_blank">加入我们</a></div>
<div class="line-two"><span>广州九微科技有限公司</span> <span>Copyright 2001-2023 GTER All Rights Reserved</span> <span><a
href="http://www.miitbeian.gov.cn/" target="_blank"
style="color: rgb(153, 153, 153); text-decoration: none;">粤ICP备14050432号</a></span></div>
</section>
</template>
<script>
export default {
name: 'GterFangFooter',
data() {
return {
};
},
};
</script>
<style lang="less" scoped>
.index-footer {
background: #333;
text-align: center;
height: 240px;
padding: 56px 0;
min-width: 1200px;
box-sizing: border-box;
color: #fff;
}
.index-footer * {
box-sizing: border-box;
color: inherit !important;
}
.index-footer .footer-link {
width: 622px;
height: 45px;
background: rgba(255, 255, 255, 0.05);
border-radius: 23px;
font-size: 14px;
line-height: 45px;
padding: 0 25px;
width: fit-content;
margin: 0 auto;
}
.index-footer .footer-link a:not(:last-child) {
display: inline-block;
margin-right: 30px;
}
.index-footer .line-two {
font-size: 14px;
margin: 26px 0 0px;
}
.index-footer .line-two span {
display: inline-block;
margin: 0 15px;
}
</style>

View File

@ -1,40 +1,44 @@
<template>
<header class="container-header">
<header class="container-header flexflex">
<nav class="header-nav flexacenter">
<div class="header-nav-item" :class="{ pitch: index == 3 }" v-for="(item, index) in navList" :key="index">
{{ item }}</div>
<img class="header-nav-item header-user-img"
src="https://oss.gter.net/avatar/97KwEWIDY-QTHTXcpEbnWQxaRv6Xz0ll1wRhYWNh/middle?random=1687145465">
</nav>
<div class="logo-box flexacenter">
<img class="logo-icon" src="@/assets/img/edit/logo.png" />
<img class="logo-text" src="@/assets/img/edit/logo-text.png" />
</div>
<div class="header-bj-box"></div>
<div class="container-header-bj"></div>
<nav class="nav-box flexflex">
<div class="nav-list wid1200 flexflex">
<div class="nav-item" v-for="item in tabList" :key="item">{{ item.name }}</div>
</div>
</nav>
</header>
</template>
<script>
export default {
name: 'ZufangHead',
<script setup>
const navList = ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"]
data() {
return {
navList: ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"],
const tabList = [{
name: '首页',
}, {
name: '个人房源'
}, {
name: '中介房源'
}, {
name: '品牌公寓'
}, {
name: '求房源'
}, {
name: '我的'
}
]
};
},
mounted() {
},
methods: {
},
};
</script>
<style lang="less">
@ -45,37 +49,38 @@ export default {
height: 260px;
margin: 0 auto;
.container-header-bj {
width: 100vw;
min-width: 1200px;
height: 260px;
background-image: url('@/assets/img/edit/bj-img1920.png');
background-repeat: no-repeat;
background-position: center;
.header-bj-box {
position: absolute;
top: 0;
left: 0;
background-image: url('@/assets/img/edit/bj-img1920.png');
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 260px;
background-size: cover;
z-index: -1;
&::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
min-width: 1200px;
max-width: 1920px;
height: 100%;
background-color: rgba(0, 0, 0, 0.698039215686274);
}
}
.header-nav {
height: 46px;
width: 1200px;
justify-content: flex-end;
margin: 0 auto;
position: relative;
z-index: 1;
cursor: pointer;
@ -112,7 +117,6 @@ export default {
}
.logo-box {
position: relative;
margin: 21px auto 0;
width: 1200px;
z-index: 1;
@ -128,5 +132,23 @@ export default {
margin-left: 9px;
}
}
.nav-box {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin: 0 auto;
width: 100%;
height: 43px;
background: rgba(0, 0, 0, 0.596078431372549);
border-bottom: 4px solid rgba(78, 144, 204, 1);
.nav-list {
background: red;
margin: 0 auto;
}
}
}
</style>

View File

@ -10,18 +10,17 @@ const routes = [
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/edit',
name: 'edit',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/edit.vue')
},
{
path: '/user',
name: 'user',
component: () => import(/* webpackChunkName: "about" */ '../views/user.vue')
}
]

View File

@ -1,5 +1,6 @@
<template>
<!-- <div id="container"></div> -->
<header-nav></header-nav>
<map-component v-if="mapComponentState" :info="info" @choosingLocation="choosingLocation" />
<choosing-identity v-if="false"></choosing-identity>
<div class="content-box flexflex">
@ -12,7 +13,8 @@
<img class="housing-info-location-icon" src="@/assets/img/edit/location-icon.png" />
香港
</div>
<img v-if="false" class="housing-info-certifying" src="@/assets/img/edit/certifying-agent.png">
<img v-if="userIntermediary" class="housing-info-certifying"
src="@/assets/img/edit/certifying-agent.png">
<div v-else class="housing-info-identity flexcenter">{{ intermediaryObj[intermediary] }}</div>
</div>
<div class="housing-info-list" v-if="type != 'plus'">
@ -311,49 +313,8 @@
<!-- 所在区域 -->
<div class="form-option modeOne flexacenter" v-if="intermediary != 6 && item.field == 'location'">
<!-- <div ref="location" class="modeOne-item flexacenter"
:class="{ 'pitch': info['location'], 'disabled': verified == 1 }"
style="width: 640px;border-color: rgba(170, 170, 170, 1);"
@click="verified == 1 ? '' : areaPopState = true">
<div class="modeOne-text flexacenter" v-if="info['location']">
{{ locationData[Math.floor(info.location)].name }}
<img class="form-arrows" src="@/assets/img/edit/thin-arrow.svg" />
<img class="form-arrows form-arrows-disabled"
src="@/assets/img/edit/thin-arrow-disabled.svg" />
{{ locationData[Math.floor(info.location)].data[info.location] }}
</div>
<div class="modeOne-text flexacenter" style="color: #AAAAAA;" v-else>请选择</div>
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
<img class="arrows-icon arrows-disabled-icon" style="transform: rotate(0);"
src="@/assets/img/edit/disabled-icon.svg" />
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" /> -->
<!-- 弹窗 -->
<!-- <div class="pop area-pop-box radius16" style="position: absolute;top: 58px;height: 614px;"
v-if="areaPopState">
<div class="area-box flexflex" style="height: 100%;">
<div class="area-left">
<div class="area-item flexacenter" :class="{ 'pitchpitch': index == locationValue }"
v-for="(item, index) in locationData" :key="index"
@click.stop="handleArea(index)">
<div class="dot"></div>
{{ item.name }}
<div class="semicircle-outside"></div>
</div>
</div>
<div class="area-right flex1">
<div class="area-item flexacenter"
:class="{ 'pitchpitch': info['location'] == index }"
v-for="(item, index) in locationData[locationValue].data" :key="index"
@click.stop="handleArea(index, item)">
<div class="area-item-name">{{ item }}</div>
<img class="area-item-pitch" src="@/assets/img/edit/blue-tick.svg" />
</div>
</div>
</div>
</div> -->
<!-- </div> -->
<el-popover placement="bottom" :width="640" :show-arrow="false" trigger="click" popper-style="padding: 0;border-radius:16px;">
<el-popover placement="bottom" :width="640" :show-arrow="false" trigger="click"
popper-style="padding: 0;border-radius:16px;">
<template #reference>
<div ref="location" class="modeOne-item flexacenter"
:class="{ 'pitch': info['location'], 'disabled': verified == 1 }"
@ -374,8 +335,6 @@
</div>
</template>
<!-- <div class="pop area-pop-box radius16" style="position: absolute;top: 58px;height: 614px;" -->
<!-- <div class="pop area-pop-box radius16" style="" v-if="areaPopState"> -->
<div class="pop area-pop-box radius16" style="">
<div class="area-box flexflex" style="height: 100%;">
<div class="area-left">
@ -605,7 +564,6 @@
maxlength="80" show-word-limit>
</el-input>
</div>
</template>
</div>
@ -663,14 +621,6 @@
</div>
</div>
<!-- 如何获取微信二维码 -->
<div class="flexcenter pop-mask" @click="howBoxState = false" v-if="howBoxState">
<div class="pop how-box shadow radius16" @click.stop="">
<img class="pop-close" @click.stop="howBoxState = false" src="@/assets/img/edit/close-icon.svg" />
<div class="how-title">如何获取微信二维码</div>
<img class="how-img" src="@/assets/img/edit/how-img.svg" />
</div>
</div>
<!-- 发布成功 -->
<div class="flexcenter pop-mask" @click="succeedPopState = 0" v-if="succeedPopState == 1">
<div class="pop succeed-box shadow radius16 flexflex"
@ -737,29 +687,24 @@
<a class="succeed-examine" :href="skipUrl">查看刚刚发布的{{ intermediary == 6 ? '求' : '' }}房源</a>
</div>
</div>
<!-- 提交失败 -->
<div class="flexcenter pop-mask" @click="failPopState = false" v-if="failPopState">
<div class="pop fail-box shadow radius16 flexcenter">
<img class="pop-close" src="@/assets/img/edit/close-icon.svg" />
<img class="fail-icon" src="@/assets/img/edit/fail-icon.png" />
<div class="fail-title">提交失败</div>
<div class="fail-text">已存为草稿</div>
<div class="fail-hint">房源数量已达上限</div>
<div class="fail-hint" style="margin-bottom: 57px;">下架旧房源便可发布新房源</div>
<div class="fail-btn flexcenter">
房源管理<img class="fail-btn-icon" src="@/assets/img/edit/fail-btn-icon.svg" />
</div>
</div>
</div>
<fail-pop :close="failPopState = false"></fail-pop>
<!-- 了解更多弹窗 -->
<about-pop :popState="aboutPopState" :intermediary="intermediary" @close="handleAboutPopState"></about-pop>
<!-- 页面底部 -->
<page-footer></page-footer>
<!-- 如何获取微信二维码 -->
<how :howBoxState="howBoxState" @close="howBoxState = false"></how>
</template>
<!-- <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script> -->
<script>
import aboutPop from '@/components/edit/about-pop.vue'
import mapComponent from '@/components/edit/map.vue'
import choosingIdentity from '@/components/edit/choosingIdentity.vue'
import pageFooter from '@/components/footer/footer.vue'
import how from '@/components/edit/how-pop.vue'
import failPop from '@/components/edit/fail-pop.vue'
import headerNav from '@/components/public/head.vue'
export default {
name: 'ZufangEdit',
@ -767,6 +712,7 @@ export default {
return {
value: '',
user: {},
userIntermediary: false, //
allowpublishednum: 0,
intermediaryObj: {
1: "中介",
@ -904,6 +850,10 @@ export default {
aboutPop,
mapComponent,
choosingIdentity,
pageFooter,
how,
failPop,
headerNav,
},
methods: {
@ -922,7 +872,7 @@ export default {
background: 'rgba(0, 0, 0, 0.7)'
});
this.$post('/tenement/forum', {
this.$post('/tenement/pc/api/publish', {
intermediary: this.intermediary,
token: this.token,
uniqid: this.uniqid,
@ -972,21 +922,6 @@ export default {
let info = data.info
console.log("info", info);
// info['rentalduration'] = 999
// info['type'] = 1.1
// info['leasetime'] = ""
// info['rent'] = 100
// info['property'] = 1
// info['floor'] = 20
// info['elevator'] = 1
// info['sunshinearea'] = 1
// info['acreage'] = 200
// info.location = "1.5"
// communityid: ""
// communityname: ""
if (info['type']) this.typeValue = info['type'] >>> 0
if (!info['leasetime']) info['leasetime'] = null
@ -1145,7 +1080,7 @@ export default {
//
uploadQRCode(base64data) {
this.$post('/tenement/forum/uploadweixinqrcode', {
this.$post('/tenement/pc/api/publish/uploadweixinqrcode', {
base64data,
}).then(res => {
this.loading.close();
@ -1217,7 +1152,7 @@ export default {
formData.append('name', target.name); //
formData.append('type', type); //
this.$axios.post('/tenement/forum/upload', formData).then(res => {
this.$axios.post('/tenement/pc/api/publish/upload', formData).then(res => {
res = res['data']
if (res.code != 200) {
@ -1303,7 +1238,7 @@ export default {
})
}
this.$post("/tenement/forum/submit", {
this.$post("/tenement/pc/api/publish/submit", {
token: this.token,
info,
status,
@ -1458,7 +1393,7 @@ export default {
let info = this.info
let location = `${info['longitude'] || 114.160151},${info['latitu1de'] || 22.247117}`
this.$post("/tenement/forum/placeAround", {
this.$post("/tenement/pc/api/publish/placeAround", {
location
}).then(res => {
if (res.code != 200) return
@ -1505,7 +1440,7 @@ export default {
<style lang="less" scoped>
.content-box {
max-width: 1200px;
width: 1200px;
margin: -36px auto 50px;
align-items: flex-start;
position: relative;
@ -1592,7 +1527,6 @@ export default {
.housing-info-head {
width: 75px;
color: #7F7F7F;
// border-right: 1px solid #aaaaaa;
}
.housing-info-trail {
@ -1663,7 +1597,6 @@ export default {
}
.form-box {
// height: 500px;
background-color: #fff;
border: 1px solid rgba(235, 235, 235, 1);
@ -1672,9 +1605,6 @@ export default {
color: #000;
font-size: 20px;
font-weight: 650;
// padding-top: 36px;
// padding-left: 47px;
// padding-bottom: 25px;
padding: 36px 47px 25px;
border-bottom: 1px solid #ebebeb;
}
@ -1828,7 +1758,6 @@ export default {
font-size: 16px;
color: #555;
padding: 0 20px;
// justify-content: space-between;
cursor: pointer;
.el-icon-date:before {
@ -2299,8 +2228,6 @@ export default {
margin-right: 35px;
}
// margin-bottom: 20px;
.input-file {
position: absolute;
top: 0;
@ -2345,7 +2272,6 @@ export default {
width: 20px;
height: 20px;
position: absolute;
// top: 50%;
top: calc(50% - 5px);
left: 50%;
transform: translate(-50%, -50%);
@ -2544,11 +2470,7 @@ export default {
}
.pop {
// position: fixed;
z-index: 2;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
background-color: #fff;
.pop-close {
@ -2560,25 +2482,6 @@ export default {
cursor: pointer;
}
&.how-box {
position: relative;
padding: 40px 45px 40px;
.how-title {
font-size: 20px;
font-weight: 650;
color: #000;
margin-bottom: 32px;
text-align: center;
}
.how-img {
width: 550px;
height: 584px;
}
}
&.succeed-box {
padding: 63px 0 68px;
background-image: url('@/assets/img/edit/succeed-pop-bj.svg');
@ -2598,7 +2501,6 @@ export default {
margin-right: 12px;
}
// margin: 0 auto 93px;
margin: 0 auto 110px;
color: #333;
font-weight: 650;
@ -2675,55 +2577,6 @@ export default {
}
&.fail-box {
width: 500px;
flex-direction: column;
padding-top: 60px;
padding-bottom: 70px;
.fail-icon {
width: 80px;
height: 80px;
margin-bottom: 22px;
}
.fail-title {
color: #333;
font-size: 24px;
font-weight: 650;
margin-bottom: 7px;
}
.fail-text {
color: #aaa;
font-size: 14px;
margin-bottom: 43px;
}
.fail-hint {
color: #555;
font-size: 16px;
margin-bottom: 14px;
}
.fail-btn {
width: 240px;
height: 50px;
background-color: rgba(98, 177, 255, 1);
border-radius: 120px;
font-size: 20px;
color: #fff;
font-weight: 700;
.fail-btn-icon {
width: 24px;
height: 24px;
margin-left: 10px;
}
}
}
&.type-pop-box {
width: 640px;
height: 181px;
@ -2766,13 +2619,9 @@ export default {
}
&.area-pop-box {
// width: 640px;
height: 695px;
left: 0;
background-color: rgba(255, 255, 255, 1);
// -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
// -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
// box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
overflow: hidden;
z-index: 101;
@ -2934,7 +2783,6 @@ export default {
display: none;
}
// #62B1FF
}
}
}
@ -3096,6 +2944,5 @@ export default {
}
}
}
</style>

93
src/views/user.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<header-nav></header-nav>
<div class="user-box">
<div class="info-box flexacenter">
<div class="info-left flexacenter">
<img class="info-user-icon"
src="https://oss.gter.net/avatar/97KwEWIDY-QTHTXcpEbnWQxaRv6Xz0ll1wRhYWNh/middle?random=1687145465">
<div class="info-user-box">
<div class="info-user-top flexacenter">
<div class="info-user-username">Ada.W</div>
</div>
<div class="info-user-bottom">UID56789</div>
</div>
</div>
</div>
</div>
</template>
<script>
import headerNav from '@/components/public/head.vue'
export default {
name: 'GterFangUser',
data() {
return {
};
},
mounted() {
},
components: {
headerNav,
},
methods: {
},
};
</script>
<style lang="less" scoped>
.user-box {
width: 1200px;
height: 238px;
margin: 30px auto 0;
font-size: 14px;
background: linear-gradient(0deg, rgba(214, 236, 255, 1) -4%, rgba(232, 244, 255, 1) 34%, rgba(176, 216, 255, 1) 131%);
border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
.info-box {
height: 135px;
border-bottom: 2px solid #ddeeff;
.info-left {
padding-left: 40px;
.info-user-icon {
width: 80px;
height: 80px;
border-radius: 50%;
}
.info-user-box {
margin-left: 20px;
.info-user-top {
height: 26px;
.info-user-username {
font-size: 16px;
color: #333;
}
}
.info-user-bottom {
height: 24px;
color: #7F7F7F;
}
}
}
}
}
</style>