Skip to content

P
pptist
Commit c77ae103 authored by 罗超's avatar 罗超
Browse files
Options

新增搜索样式，调整跳转

parent 9dd7ac37
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 105 deletions
src/assets/styles/common.css
View file @ c77ae103
...@@ -38,7 +38,7 @@ page { ...@@ -38,7 +38,7 @@ page {
font-family: chineseAlifont; font-family: chineseAlifont;
} }
.text-bolder{ .text-bolder{
font-weight: bolder; font-weight: 900;
} }
.overflow-hide{ .overflow-hide{
overflow: hidden; overflow: hidden;
...@@ -163,6 +163,9 @@ page { ...@@ -163,6 +163,9 @@ page {
.q-ml-sm{ .q-ml-sm{
margin-left: 5px; margin-left: 5px;
} }
.q-mb-sm{
margin-bottom: 5px;
}
.q-py-sm{ .q-py-sm{
padding-top: 5px; padding-top: 5px;
padding-bottom:5px ; padding-bottom:5px ;
...@@ -327,8 +330,12 @@ page { ...@@ -327,8 +330,12 @@ page {
.text-right{ .text-right{
text-align: right; text-align: right;
} }
.text-left{
text-align: left;
}
.text-small{ .text-small{
font-size: 12px; font-size: 12px;
font-family: microsoft yahei;
} }
.text-title{ .text-title{
font-size: 1.25rem; font-size: 1.25rem;
......
src/views/Market/Index.vue
View file @ c77ae103
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<div style="padding: 30px; max-width:1440px; margin:0 auto;"> <div style="padding: 30px; max-width:1440px; margin:0 auto;">
<el-row justify="space-between"> <el-row justify="space-between">
<el-col :span="6"> <el-col :span="6">
<h1 class="aliMarketfont" style="font-size:20px;">智慧设计平台</h1> <!-- <h1 class="aliMarketfont" style="font-size:20px;">智慧设计平台</h1> -->
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" style="height: 30px;" />
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-input v-model="queryObj.Title" placeholder="输入模板关键字快速查找" class="input-with-select"> <el-input v-model="queryObj.Title" placeholder="输入模板关键字快速查找" class="input-with-select">
...@@ -166,7 +167,7 @@ ...@@ -166,7 +167,7 @@
</Popover> </Popover>
</div> </div>
</div> </div>
<template v-if="!SalesEditor&&!ConfigId"> <template v-if="(!SalesEditor&&!ConfigId) || (SalesEditor==99)">
<div class="q-pb-md"> <div class="q-pb-md">
<div class="MarketVerticalLine">&nbsp;</div> <div class="MarketVerticalLine">&nbsp;</div>
</div> </div>
......
src/views/SellTemplate/Workspace.vue
View file @ c77ae103
<template> <template>
<div class="workspace column"> <div class="workspace column">
<div class="row q-pt-md q-px-md items-center"> <div class="row q-pa-md items-center" style="padding-bottom: 15px;">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" style="height: 30px;" /> <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" style="height: 30px;" />
<div class="col text-center"> <div class="col text-center">
<SearchDocument></SearchDocument> <SearchDocument></SearchDocument>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip effect="dark" content="模板广场" placement="right"> <el-tooltip effect="dark" content="模板广场" placement="right">
<div class="left-button q-mt-md"> <div class="left-button q-mt-md" @click="openMarketHandler(99)">
<span class="svg-icon svg-icon-primary svg-icon-2x"> <span class="svg-icon svg-icon-primary svg-icon-2x">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="q-mx-md col bg-white right-box row"> <div class="q-mx-md col bg-white right-box row">
<div class="q-pa-md" style="border-right: 1px solid #ddd;"> <div class="q-pa-md" style="border-right: 1px solid #ddd;background-color: #f5f5f5;">
<el-dropdown > <el-dropdown >
<el-button type="primary"> <el-button type="primary">
<div class="row items-center" style="width:188px;"> <div class="row items-center" style="width:188px;">
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
</el-button> </el-button>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item>创建行程</el-dropdown-item> <el-dropdown-item @click="openMarketHandler(1)">创建行程</el-dropdown-item>
<el-dropdown-item>创建广告图</el-dropdown-item> <el-dropdown-item @click="openMarketHandler(2)">创建广告图</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
...@@ -88,6 +88,7 @@ import { storeToRefs } from 'pinia'; ...@@ -88,6 +88,7 @@ import { storeToRefs } from 'pinia';
import { ref } from 'vue'; import { ref } from 'vue';
import SearchDocument from './components/SearchDocument.vue' import SearchDocument from './components/SearchDocument.vue'
import Example from './components/Example.vue' import Example from './components/Example.vue'
import { useScreenStore,useSellTemplateStore } from '@/store'
import { Plus,ArrowDown,Clock,Star,Share,Picture,Management,Delete } from '@element-plus/icons-vue'; import { Plus,ArrowDown,Clock,Star,Share,Picture,Management,Delete } from '@element-plus/icons-vue';
const {userInfo} = storeToRefs(userStore()) const {userInfo} = storeToRefs(userStore())
...@@ -96,6 +97,10 @@ const currentMenu = ref<number>(0) ...@@ -96,6 +97,10 @@ const currentMenu = ref<number>(0)
const setCurrentMenuHandler=(i:number)=>{ const setCurrentMenuHandler=(i:number)=>{
currentMenu.value=i currentMenu.value=i
} }
const openMarketHandler=(i:number)=>{
useSellTemplateStore().setSalesEditor(i);
useScreenStore().setMarket(true)
}
</script> </script>
<style scoped> <style scoped>
@font-face { @font-face {
......
src/views/SellTemplate/components/Example.vue
View file @ c77ae103
<template> <template>
<el-scrollbar height="100%" class="q-px-md"> <el-scrollbar height="100%" class="q-px-md">
<pre class="q-pa-md" style="width:1000px;">
storeToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefsstoreToRefs
sdfsdf
sdfsdfs
563435
535635
sdfsdf
1
1
2
3
4
5
storeToRefs
sdfsdf
sdfsdfs
563435
535635
sdfsdf
1
1
2
3
4
5
storeToRefs
sdfsdf
sdfsdfs
563435
535635
sdfsdf
1
1
2
3
4
5
</pre>
</el-scrollbar> </el-scrollbar>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
......
src/views/SellTemplate/components/SearchDocument.vue
View file @ c77ae103
<template> <template>
<div class="q-pa-md rounded" style="display: inline-block;" :class="{'search-range-box':isSearchFocus}"> <div class="q-pa-md rounded search-area" style="display: inline-block;" :class="{'search-range-box':isSearchFocus}" v-click-outside="()=>isSearchFocus=false"><!-- v-click-outside="()=>isSearchFocus=false" -->
<el-input size="large" @focus="()=>isSearchFocus=true" @blur="()=>isSearchFocus=false" v-model="searchKey" placeholder="搜索行程，广告，分享文件" style="width: 38vw;"> <el-input size="large" @focus="()=>isSearchFocus=true" v-model="searchKey" placeholder="搜索行程，广告，分享文件" style="width: 38vw;">
<template #prefix> <template #prefix>
<el-icon><Search style="color:var(--el-color-primary);"/></el-icon> <el-icon><Search style="color:var(--el-color-primary);"/></el-icon>
</template> </template>
</el-input> </el-input>
<div v-if="isSearchFocus">
<el-tabs v-model="searchType" class="q-mt-md q-mx-md" @tab-click="handleClick">
<el-tab-pane label="全部" name="all"></el-tab-pane>
<el-tab-pane label="行程" name="trip"></el-tab-pane>
<el-tab-pane label="广告" name="ad"></el-tab-pane>
</el-tabs>
<div class="search-result-block">
<div class="text-h6 text-left text-bolder q-mx-md q-mb-sm">行程文档</div>
<div class="items row items-center q-pa-md">
<img class="biao" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_558.png" />
<div class="right col text-left q-pb-md">
<div class="file-name" truncated>2024-03-12 摩洛哥、突尼斯北非系列2024-03-12 摩洛哥、突尼斯<span class="text-waring">北非系</span>列2024-03-12 摩洛哥、突尼斯北非系列</div>
<div class="text-small q-mt-sm row items-center text-info">
<span>我的行程文档</span>
<span class="q-mx-md col">6 天前编辑过</span>
<span>我 创建的</span>
</div>
</div>
</div>
<div class="items row items-center q-pa-md">
<img class="biao" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_558.png" />
<div class="right col text-left q-pb-md">
<div class="file-name" truncated>2024-03-12 摩洛哥、<span class="text-waring">突尼斯</span>北非系列</div>
<div class="text-small q-mt-sm row items-center text-info">
<span>我的行程文档</span>
<span class="q-mx-md col">6 天前编辑过</span>
<span>我 创建的</span>
</div>
</div>
</div>
<div class="items row items-center q-pa-md">
<img class="biao" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_558.png" />
<div class="right col text-left q-pb-md">
<div class="file-name" truncated>2024-03-12 <span class="text-waring">摩洛哥</span>、突尼斯北非系列2024-03-12 摩洛哥、突尼斯北非系列</div>
<div class="text-small q-mt-sm row items-center text-info">
<span>我的行程文档</span>
<span class="q-mx-md col">6 天前编辑过</span>
<span>我 创建的</span>
</div>
</div>
</div>
</div>
<div class="search-result-block q-mt-lg">
<div class="text-h6 text-left text-bolder q-mx-md q-mb-sm">广告图</div>
<div class="items row items-center q-pa-md">
<img class="biao" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_777.png" />
<div class="right col text-left q-pb-md">
<div class="file-name" truncated>2024-03-12 摩洛哥、突尼斯北非系列2024-03-12 摩洛哥、突尼斯<span class="text-waring">北非系</span>列2024-03-12 摩洛哥、突尼斯北非系列</div>
<div class="text-small q-mt-sm row items-center text-info">
<span>我的行程文档</span>
<span class="q-mx-md col">6 天前编辑过</span>
<span>我 创建的</span>
</div>
</div>
</div>
<div class="items row items-center q-pa-md">
<img class="biao" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_777.png" />
<div class="right col text-left q-pb-md">
<div class="file-name" truncated>2024-03-12 摩洛哥、<span class="text-waring">突尼斯</span>北非系列</div>
<div class="text-small q-mt-sm row items-center text-info">
<span>我的行程文档</span>
<span class="q-mx-md col">6 天前编辑过</span>
<span>我 创建的</span>
</div>
</div>
</div>
<div class="items row items-center q-pa-md">
<img class="biao" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_777.png" />
<div class="right col text-left q-pb-md">
<div class="file-name" truncated>2024-03-12 <span class="text-waring">摩洛哥</span>、突尼斯北非系列2024-03-12 摩洛哥、突尼斯北非系列</div>
<div class="text-small q-mt-sm row items-center text-info">
<span>我的行程文档</span>
<span class="q-mx-md col">6 天前编辑过</span>
<span>我 创建的</span>
</div>
</div>
</div>
<div class="text-info cusor-pointer q-mt-md text-small text-left q-mx-md">更多</div>
</div>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -12,11 +95,51 @@ import { ref } from 'vue'; ...@@ -12,11 +95,51 @@ import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'; import { Search } from '@element-plus/icons-vue';
const searchKey = ref<string>('') const searchKey = ref<string>('')
const isSearchFocus = ref(false) const isSearchFocus = ref(false)
const searchType = ref<string>('all')
</script> </script>
<style> <style>
.search-area{
position:absolute;
top:0px;
left: calc(50% - 19vw - 10px);
z-index:9;
}
.search-range-box{ .search-range-box{
background-color: #FFF; background-color: #FFF;
box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important; box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
} }
.search-area .el-tabs__nav-wrap::after{
height:0px !important;
}
.search-result-block{}
.search-result-block .items{
background:#FFF;
border-radius:8px;
cursor:pointer;
padding-bottom:0px !important;
}
.search-result-block .items:hover{
background:#F1f1f1;
}
.search-result-block .items .biao{
width:25px;
margin-right:8px;
}
.search-result-block .items .right{
border-bottom:1px solid #f5f5f5;
min-width: 0;
width: 0;
}
.search-result-block .items .right .file-name{
font-size:14px;
color:#000;
margin-bottom:3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.search-result-block .items:hover .right{
border-bottom-color: transparent;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment