File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="box">
<p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 Search Bar</p>
<div style="padding:30px 0">
<div class="flex-between">
<!-- 여기서부터 -->
<div class="flex">
<select name="" id="" class="circle-select">
<option value="all">전체</option>
</select>
<div class="search">
<input type="text" class="search-input" placeholder="Search">
<button class="search-button">
<svg-icon type="mdi" :path="searchPath" class="search-icon"></svg-icon>
</button>
</div>
</div>
<!-- 여기서까지 복사 -->
<!-- 여기서부터 -->
<div class="flex">
<select name="" id="" class="square-select">
<option value="all">전체</option>
</select>
<div class="search-square">
<input type="text" class="square-input" placeholder="Search">
<button class="square-button">
<svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
</button>
</div>
</div>
<!-- 여기서까지 복사 -->
</div>
</div>
<div style="padding:30px 0">
<div class="flex-between">
<!-- 여기서부터 -->
<div class="flex">
<select name="" id="" class="circle-select2">
<option value="all">전체</option>
</select>
<div class="search2">
<input placeholder="Search" type="text" class="search-zone">
<button type="submit" class="search-btn">검색</button>
</div>
</div>
<!-- 여기서까지 복사 -->
<!-- 여기서부터 -->
<div class="flex">
<select name="" id="" class="square-select2">
<option value="all">전체</option>
</select>
<div class="search2-square">
<input placeholder="Search" type="text" class="square-zone">
<button type="submit" class="square-btn">검색</button>
</div>
</div>
<!-- 여기서까지 복사 -->
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
export default {
data() {
return {
searchPath: mdiMagnify
}
},
methods: {
},
watch: {
},
computed: {
},
components: {
'SvgIcon': SvgIcon
},
mounted() {
console.log('main mounted');
}
}
</script>
<style scoped>
/* */
.box {
padding: 50px;
border: 1px solid #eee;
margin-bottom: 30px;
}
/* 1번 디자인 */
.search {
position: relative;
margin-left: 5px;
}
.circle-select {
border-radius: 30px;
}
.search-input {
color: #646464;
padding: 5px 10px;
border-radius: 30px;
width: 300px;
transition: all ease-in-out .5s;
}
.search-input:hover,
.search-input:focus {
box-shadow: 0 0 1em #00000013;
}
.search-input:focus {
outline: none;
background-color: #f0eeee;
}
.search-input::-webkit-input-placeholder {
font-weight: 100;
color: #ccc;
}
.search-input:focus {
background-color: #f0eeee;
}
.search-button {
border: none;
margin-left: 0;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
}
.search-button:hover {
cursor: pointer;
}
.search-icon {
color: #b4b4b4;
}
/* 1-2 */
.search-square {
position: relative;
}
.square-input {
color: #646464;
padding: 5px 10px;
border-radius: 5px;
width: 300px;
transition: all ease-in-out .5s;
margin-left: 5px;
}
.square-input:hover,
.square-input:focus {
box-shadow: 0 0 1em #00000013;
}
.square-input:focus {
outline: none;
background-color: #f0eeee;
}
.square-input::-webkit-input-placeholder {
font-weight: 100;
color: #ccc;
}
.square-input:focus {
background-color: #f0eeee;
}
.square-button {
border: none;
margin-left: 0;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
}
.square-button:hover {
cursor: pointer;
}
.square-icon {
color: #b4b4b4;
}
/* 2번 디자인 */
.search2 {
display: inline-block;
position: relative;
}
.circle-select2 {
border: none;
border-radius: 30px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.search2 .search-zone {
width: 200px;
padding: 5px 10px;
border: none;
border-radius: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-left: 5px;
}
.search2 .search-btn {
background-color: #4e99e9;
border: none;
color: #fff;
cursor: pointer;
padding: 5px 10px;
border-radius: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
right: 0;
transition: .9s ease;
}
.search2 .search-btn:hover {
transform: scale(1.05);
color: rgb(255, 255, 255);
background-color: #213f99;
}
/* 2-1 */
.search2-square {
display: inline-block;
position: relative;
}
.square-select2{
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.search2-square .square-zone {
width: 200px;
padding: 5px 10px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-left: 5px;
}
.search2-square .square-btn {
background-color: #4e99e9;
border: none;
color: #fff;
cursor: pointer;
padding: 5px 10px;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
right: 0;
transition: .9s ease;
}
.search2-square .square-btn:hover {
transform: scale(1.05);
color: rgb(255, 255, 255);
background-color: #213f99;
}
/* select + search */
</style>