修改搜索页面样式问题
This commit is contained in:
Jason
parent
a8e08053be
commit
cbdb12f5d7
|
|
@ -16,18 +16,18 @@
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<el-card class="!border-none mt-4" shadow="never">
|
<el-card class="!border-none mt-4" shadow="never">
|
||||||
<div class="flex">
|
<div class="lg:flex">
|
||||||
<div class="flex-1 w-3/5">
|
<div class="flex-1 min-w-0">
|
||||||
<el-button type="primary" class="mb-4" @click="handleAdd">添加</el-button>
|
<el-button type="primary" class="mb-4" @click="handleAdd">添加</el-button>
|
||||||
<el-table size="large" :data="formData.list">
|
<el-table size="large" :data="formData.list">
|
||||||
<el-table-column label="关键词" prop="describe" min-width="160">
|
<el-table-column label="关键词" prop="describe" min-width="200">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-input v-model="row.name" clearable />
|
<el-input v-model="row.name" clearable maxlength="30" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="排序" prop="describe" min-width="160">
|
<el-table-column label="排序" prop="describe" min-width="80">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-input v-model="row.sort" type="number" />
|
<el-input v-model="row.sort" type="number" clearable />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="操作" min-width="80" fixed="right">
|
<el-table-column label="操作" min-width="80" fixed="right">
|
||||||
|
|
@ -45,8 +45,8 @@
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-2/5 hot-search-phone">
|
<div class="flex-none hot-search-phone mt-4 lg:mt-0 lg:ml-4">
|
||||||
<span class="mb-4">- 热搜预览图 -</span>
|
<div class="mb-4 text-center">- 热搜预览图 -</div>
|
||||||
<div class="hot-search-phone-content">
|
<div class="hot-search-phone-content">
|
||||||
<!-- 搜索框 -->
|
<!-- 搜索框 -->
|
||||||
<div class="search-com">
|
<div class="search-com">
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
<!-- 热门搜索 -->
|
<!-- 热门搜索 -->
|
||||||
<div class="hot-search-title">热门搜索</div>
|
<div class="hot-search-title">热门搜索</div>
|
||||||
<div class="hot-search-text">
|
<div class="hot-search-text">
|
||||||
<span v-for="(text, index) in list" :key="index">{{ text.name }}</span>
|
<span class="truncate max-w-full" v-for="(text, index) in list" :key="index">{{ text.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -125,12 +125,10 @@ getData()
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.hot-search {
|
.hot-search {
|
||||||
.hot-search-phone {
|
.hot-search-phone {
|
||||||
margin-left: 20px;
|
width: 300px;
|
||||||
@apply flex flex-col items-center;
|
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
width: 280px;
|
width: 100%;
|
||||||
height: 494px;
|
height: 530px;
|
||||||
padding: 12px 12px;
|
padding: 12px 12px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid #e6e6e6;
|
border: 1px solid #e6e6e6;
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,9 @@
|
||||||
<view class="hot" v-if="hot_search.length">
|
<view class="hot" v-if="hot_search.length">
|
||||||
<view class="font-medium pl-[24rpx] pt-[26rpx] pb-[6rpx] text-lg">热门搜索</view>
|
<view class="font-medium pl-[24rpx] pt-[26rpx] pb-[6rpx] text-lg">热门搜索</view>
|
||||||
|
|
||||||
<view class="w-full pl-[24rpx] pr-[8rpx]">
|
<view class="w-full px-[24rpx]">
|
||||||
<block v-for="(hotItem, index) in hot_search" :key="index">
|
<block v-for="(hotItem, index) in hot_search" :key="index">
|
||||||
<view class="keyword" @click="handleHistoreSearch(hotItem)">{{ hotItem }}</view>
|
<view class="keyword truncate max-w-full" @click="handleHistoreSearch(hotItem)">{{ hotItem }}</view>
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -18,14 +18,14 @@
|
||||||
|
|
||||||
<!-- 历史搜索 -->
|
<!-- 历史搜索 -->
|
||||||
<view class="history" v-if="his_search.length">
|
<view class="history" v-if="his_search.length">
|
||||||
<view class="flex justify-between px-[24rpx] pb-[6rpx]">
|
<view class="flex justify-between px-[24rpx] pb-[6rpx] pt-[26rpx]">
|
||||||
<view class="text-lg font-medium">历史搜索</view>
|
<view class="text-lg font-medium">历史搜索</view>
|
||||||
<view class="text-xs text-muted" @click="() => emit('clear')">清空</view>
|
<view class="text-xs text-muted" @click="() => emit('clear')">清空</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="w-full pl-[24rpx] pr-[8rpx]">
|
<view class="w-full px-[24rpx]">
|
||||||
<block v-for="(hisItem, index) in his_search" :key="index">
|
<block v-for="(hisItem, index) in his_search" :key="index">
|
||||||
<view class="keyword" @click="handleHistoreSearch(hisItem)">{{ hisItem }}</view>
|
<view class="keyword truncate" @click="handleHistoreSearch(hisItem)">{{ hisItem }}</view>
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue