123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- <template>
- <section class="page-container container-index">
- <my-header ref="myHeader"/>
- <div class="page-wrap">
- <div class="nav-container">
- <div class="nav-wrap">
- <a
- :href="`/${wwwURL}/${locale}`"
- target="_blank"
- class="logo">
- <img
- :src="`//static.hoolihome.com/common/default/logo-${locale}.png`"
- alt="Logo">
- </a>
- <ul class="tabs">
- <li
- v-for="(item,index) in tabs"
- :key="index"
- :class="{'item':true,'active':tabActiveIndex===index}">
- <a
- :href="item.url"
- class="link">{{ item.name }}</a>
- </li>
- </ul>
- </div>
- </div>
- <nuxt-child/>
- </div>
- <my-footer :friendship-link-arr="friendshipLinkArr"/>
- </section>
- </template>
- <script>
- import MyHeader from '~/components/common/MyHeader'
- import MyFooter from '~/components/common/MyFooter'
- import { php_api_link_list } from '~/common/apis.js'
- import { wwwURL } from '~/common/config.js'
- export default {
- async asyncData({ app, store }) {
- let friendshipLinkArr = await app.$axios
- .$post(php_api_link_list)
- .then(res => {
- if (res) {
- let { code, data } = res
- code = parseInt(code)
- if (code === 0 && data && Array.isArray(data.list)) {
- return data.list
- }
- }
- return []
- })
- .catch(e => {
- return []
- })
- return { friendshipLinkArr }
- },
- head() {
- let title = ''
- let keywords = ''
- let description = ''
- let { locale } = this.$store.state
- if (locale === 'cn') {
- title = '海外租房_美国|英国|澳洲|加拿大留学生租房_留学生公寓-hooli社区'
- keywords =
- '海外租房,美国租房,英国租房,澳大利亚租房,加拿大租房,留学生公寓,留学生租房'
- description =
- 'hooli社区是解决海外租房,留学生租房问题的网站,提供美国租房、英国租房、澳大利亚租房、加拿大租房等全球热门国家500+城市租房和海外高校生活、留学生租房问题解答。'
- } else if (locale === 'en') {
- title =
- 'Overseas Rentals_International Student Rentals_International Student Residences - hooli Community'
- keywords =
- 'International student apartments, study and rent, study abroad, house rental, overseas rental prices, overseas rentals, overseas rentals, overseas purchases, overseas purchases, overseas living services'
- description =
- "Hooli, the preferred platform for studying abroad to rent a house, the listing is located in 500+ cities in the world's most popular study countries, providing 200,000+ rooms, covering all major overseas universities, real-time updating of the latest information on renting a house, international student housing, overseas real estate, etc. Effective, welcome to free consultation."
- }
- return {
- title,
- meta: [
- {
- hid: 'keywords',
- name: 'keywords',
- content: keywords
- },
- {
- hid: 'description',
- name: 'description',
- content: description
- }
- ]
- }
- },
- components: {
- MyHeader,
- MyFooter
- },
- data() {
- return {
- wwwURL,
- locale: this.$store.state.locale,
- friendshipLinkArr: [],
- tabs: [],
- tabActiveIndex: 0
- }
- },
- scrollToTop: true,
- validate({ route, redirect }) {
- const { fullPath } = route
- if (fullPath === '/cn') {
- return redirect(301, '/')
- } else if (fullPath.startsWith('/cn')) {
- return redirect(301, fullPath.replace('/cn/', '/'))
- } else {
- return true
- }
- },
- created() {
- let { locales, locale } = this.$store.state
- let { fullPath } = this.$route
- let flag = false //路由是否带语言,默认不带
- locales.some(val => {
- if (fullPath.indexOf(`/${val}`) === 0) {
- flag = true
- return true
- }
- })
- this.tabs = [
- {
- name: this.$t('tabHome'),
- url: flag ? `/${locale}` : '/'
- },
- {
- name: this.$t('tabVideos'),
- url: flag ? `/${locale}/videos` : '/videos'
- }
- ]
- },
- methods: {
- handleShowView() {
- this.$refs.myHeader.handleShowView('LoginByPassword')
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .page-container {
- .page-wrap {
- width: 100%;
- margin: 0 auto;
- .nav-container {
- background-color: #fff;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- .nav-wrap {
- display: flex;
- align-items: center;
- width: 1200px;
- height: 75px;
- margin: 0 auto;
- padding: 0 5px;
- .logo {
- width: 109px;
- font-size: 0;
- img {
- width: 100%;
- }
- }
- .tabs {
- display: flex;
- align-items: center;
- margin: 0 60px;
- .item {
- position: relative;
- height: 20px;
- line-height: 20px;
- &:not(:last-child) {
- margin-right: 40px;
- }
- .link {
- font-size: 14px;
- font-family: PingFangSC-Medium;
- font-weight: 500;
- color: rgba(0, 0, 0, 1);
- &:hover {
- color: #ff523d;
- }
- }
- }
- }
- }
- }
- }
- }
- </style>
|