<template>
|
<div class="head flex justify-between items-center pl-5 pr-5">
|
<div class="more mr-5"><img src="@/assets/imgs/home/more.png" alt="" @click="onRoute('/my')"></div>
|
<div class="more_input pl-5 pr-5 flex items-center justify-start mr-5 pt-2" @click="onRoute('/optional/search')">
|
<img src="@/assets/imgs/quotes/search.png" alt="">
|
<span class="pl-5">{{ $t('请输入关键词搜寻') }}</span>
|
</div>
|
<div class="scan"><img src="@/assets/image/assets-center/language.png" alt="" @click="onRoute('/language')"></div>
|
<!-- <div class="gift"><img src="@/assets/imgs/home/gift.png" alt=""></div>
|
<div class="scan"><img src="@/assets/imgs/home/scan.png" alt=""></div>
|
<div class="instruction"><img src="@/assets/imgs/home/instruction.png" alt=""></div> -->
|
</div>
|
</template>
|
|
<script setup>
|
import { useRouter } from 'vue-router';
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n()
|
const router = useRouter()
|
|
const onRoute = (path) => {
|
router.push(path)
|
}
|
</script>
|
|
|
<style lang="scss" scoped>
|
.head {
|
width: 100%;
|
$inp-bg: #F7F7F7;
|
$inp-c: #999;
|
margin-bottom: 1rem;
|
|
.more,
|
.gift,
|
.scan,
|
.instruction {
|
width: 3.2rem;
|
}
|
|
.more_input {
|
// width: 26rem;
|
width: 100%;
|
height: 4.5rem;
|
background: $inp-bg;
|
border-radius: 2.25rem;
|
color: $inp-c;
|
font-size: 1.5rem;
|
|
span {
|
text-overflow: ellipsis;
|
overflow: hidden;
|
word-break: break-all;
|
white-space: nowrap;
|
}
|
|
img {
|
width: 2.5rem;
|
}
|
}
|
}
|
</style>
|