You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
2.5 KiB
57 lines
2.5 KiB
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue';
|
|
import { useDesign } from '~/composables/useDesign';
|
|
// import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
|
|
import banner from '~~/assets/images/homeBanner.png';
|
|
export default defineComponent({
|
|
// components: { SvgIcon },
|
|
emits: ['search'],
|
|
setup(_, ctx) {
|
|
const { prefixCls } = useDesign('banner');
|
|
const imgUrl = ref(banner);
|
|
const searchVal = ref('');
|
|
function onInput(ev: { target: { value: string; }; }) {
|
|
searchVal.value = ev.target.value;
|
|
ctx.emit('search', ev);
|
|
}
|
|
// const imgUrl = ()=
|
|
return {
|
|
prefixCls,
|
|
imgUrl,
|
|
onInput,
|
|
searchVal,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<template>
|
|
<div :class="[prefixCls, `${prefixCls}--host`]">
|
|
<img :src="imgUrl" alt="" />
|
|
<div class="search-bar">
|
|
<el-icon :size="27" >
|
|
<svg width="27px" height="27px" viewBox="0 0 27 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<title>放大镜</title>
|
|
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="首页" transform="translate(-416.000000, -351.000000)" fill="#000000" fill-rule="nonzero">
|
|
<g id="放大镜" transform="translate(416.000000, 351.000000)">
|
|
<path d="M25.853125,24.25 L20.128125,18.525 C21.73125,16.56875 22.69375,14.071875 22.69375,11.35 C22.69375,5.096875 17.60625,0.00625 11.35,0.00625 C5.096875,0.00625 0.00625,5.09375 0.00625,11.35 C0.00625,17.60625 5.09375,22.69375 11.35,22.69375 C14.06875,22.69375 16.56875,21.73125 18.525,20.128125 L24.25,25.853125 C24.471875,26.075 24.7625,26.184375 25.053125,26.184375 C25.34375,26.184375 25.634375,26.075 25.85625,25.853125 C26.296875,25.409375 26.296875,24.690625 25.853125,24.25 L25.853125,24.25 Z M2.275,11.35 C2.275,6.346875 6.346875,2.275 11.35,2.275 C16.353125,2.275 20.425,6.346875 20.425,11.35 C20.425,16.353125 16.353125,20.425 11.35,20.425 C6.346875,20.425 2.275,16.353125 2.275,11.35 Z" id="形状"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</el-icon>
|
|
<input
|
|
placeholder="按照关键词搜索"
|
|
:value="searchVal"
|
|
@input="onInput"
|
|
class="mai-input"
|
|
type="text"
|
|
/>
|
|
<button class="mai-btn" type="button">搜索</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
@import 'banner';
|
|
</style>
|