<template>
	<view class="head">
		<image src="/static/imgs/h5logo/h5logo@3x.webp" mode="aspectFit" class="applogo" alt="官网logo" />
		<view class="spacerview"></view>
		<view class="download" @tap="common.download">アプリをダウンロード</view>
	</view>
</template>

<script setup>
import { useCommonStore } from '@/stores/common.js'
const common = useCommonStore()
</script>

<style scoped>
.head {
	width: 100%;
	height: 57px;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	box-sizing: border-box;
	flex-shrink: 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	margin: 0 auto;
	z-index: 1;
}

.applogo {
	width: 128px;
	height: 33px;
}

.spacerview {
	flex: 1;
	height: 0;
	pointer-events: none
}

.download {
	min-width: 120px;
	padding: 0 16px;
	height: 35px;
	border-radius: 29px;
	background-image: linear-gradient(156deg, #7c45ed -1%, #7c68ef 19%, #7bd8f8 97%);
	color: #fff;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	letter-spacing: 0.3px;
}
</style>
