baixingwenzheng-pc/src/components/Head.vue

<template>
	<div style="background-color: #EFEFEF;width: 100%;">
		<div style="padding: 0rem 9rem;color: #A1A1A1;font-size: 0.75rem;height: 2.125rem;line-height: 2.125rem;">
			<n-flex justify="space-between">
				<div>您好，欢迎来到洛阳百姓问政！</div>
				<div>
					请<span style="color:#7B83FF">「登录」</span>或<span style="color:#7B83FF">「注册」</span>
				</div>
			</n-flex>
		</div>
	</div>
	<div class="b1-back">
		<div style="padding:0rem 0 0 9rem;font-weight: 600;">
			<div>
        <div style="font-size: 2.5rem;color: #FFFFFF;;">洛阳百姓问政</div>
        <div style="font-size: 1.19rem;color: #FFFFFF;letter-spacing: 0.52rem;margin-top: -0.9rem;">
          wz.lytv.com.cn
        </div>
      </div>
      <div style="position: absolute;text-align: center;top: 25px;left: 405px">
        <img src="/src/assets/img/logo.png" style="width: 45px">
        <div style="color: #FFFFFF;font-size: 12px">洛阳广播电视台</div>
      </div>
		</div>
		<div style="font-weight: 600;padding:9rem; 0 0 0.6">
			<n-input-group>
				<n-input placeholder="请输入想找的问题" style="width: 17rem;" />
				<n-flex :size="[1,0]">
					<div>
						<n-button :round="false" :bordered="false" color="#0051B1">
							搜索
						</n-button>
					</div>
					<div>
						<n-button :theme-overrides="buttonThemeOverrides" :round="false" color="#0051B1">
							<img src="../assets/img/brush.png" style="width: 1.5625rem;height: 1.5625rem;">
							<span style="margin-left: 0.625rem;">我要投诉</span>
						</n-button>
					</div>
				</n-flex>
			</n-input-group>
		</div>
	</div>
	<div style="padding: 5px 0px;">
		<n-flex justify="center" align="center" :size="[141,10]">
			<div class="left-line"></div>
			<n-button text color="#0051B1">
				<template #default>
					<span style="font-weight: 600;font-size: 1.25rem;">首页</span>
				</template>
			</n-button>
			<div class="left-line"></div>
			<n-button text color="#000000">
				<template #default>
					<span style="font-size: 1.25rem;">部门</span>
				</template>
			</n-button>
			<div class="left-line"></div>
			<n-button text color="#000000">
				<template #default>
					<span style="font-size: 1.25rem;">提问</span>
				</template>
			</n-button>
			<div class="left-line"></div>
			<n-button text color="#000000">
				<template #default>
					<span style="font-size: 1.25rem;">直播</span>
				</template>
			</n-button>
			<div class="left-line"></div>
			<n-button text color="#000000">
				<template #default>
					<span style="font-size: 1.25rem;">我的</span>
				</template>
			</n-button>
			<div class="left-line"></div>
		</n-flex>
	</div>
	<div style="width: 100%;background-color: #7261D9;height: 0.05rem;opacity: 0.35;"></div>

</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
	import { ButtonProps } from 'naive-ui'
	type ButtonThemeOverrides = NonNullable<ButtonProps['themeOverrides']>
	const buttonThemeOverrides : ButtonThemeOverrides = {
		borderRadius: '0px'
	}
onMounted(() => {
  window.sessionStorage.setItem('user',JSON.stringify({'name':'测试'}));
  var item=window.sessionStorage.getItem('user');
  console.log(item);
})
</script>

<style scoped>
	.left-line {
		height: 1.2rem;
		background-color: #000000;
		width: 0.05rem;
		opacity: 0.15;
	}

	.n-button {
		border-radius: 0px;
		height: 2.25rem;
	}

	.b1-back {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-self: center;
		position: relative;
		width: 100%;
		height: 6.25rem;
		background: url('../assets/img/b1.png') no-repeat;
	}
</style>