Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
P
pptist
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
viitto
pptist
Commits
c77ae103
Commit
c77ae103
authored
Feb 19, 2024
by
罗超
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
新增搜索样式,调整跳转
parent
9dd7ac37
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
147 additions
and
105 deletions
+147
-105
common.css
src/assets/styles/common.css
+8
-1
Index.vue
src/views/Market/Index.vue
+3
-2
Workspace.vue
src/views/SellTemplate/Workspace.vue
+10
-5
Example.vue
src/views/SellTemplate/components/Example.vue
+1
-95
SearchDocument.vue
src/views/SellTemplate/components/SearchDocument.vue
+125
-2
No files found.
src/assets/styles/common.css
View file @
c77ae103
...
...
@@ -38,7 +38,7 @@ page {
font-family
:
chineseAlifont
;
}
.text-bolder
{
font-weight
:
bolder
;
font-weight
:
900
;
}
.overflow-hide
{
overflow
:
hidden
;
...
...
@@ -163,6 +163,9 @@ page {
.q-ml-sm
{
margin-left
:
5px
;
}
.q-mb-sm
{
margin-bottom
:
5px
;
}
.q-py-sm
{
padding-top
:
5px
;
padding-bottom
:
5px
;
...
...
@@ -327,8 +330,12 @@ page {
.text-right
{
text-align
:
right
;
}
.text-left
{
text-align
:
left
;
}
.text-small
{
font-size
:
12px
;
font-family
:
microsoft
yahei
;
}
.text-title
{
font-size
:
1.25rem
;
...
...
src/views/Market/Index.vue
View file @
c77ae103
...
...
@@ -3,7 +3,8 @@
<div
style=
"padding: 30px; max-width:1440px; margin:0 auto;"
>
<el-row
justify=
"space-between"
>
<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
:span=
"6"
>
<el-input
v-model=
"queryObj.Title"
placeholder=
"输入模板关键字快速查找"
class=
"input-with-select"
>
...
...
@@ -166,7 +167,7 @@
</Popover>
</div>
</div>
<
template
v-if=
"
!SalesEditor&&!ConfigId
"
>
<
template
v-if=
"
(!SalesEditor&&!ConfigId) || (SalesEditor==99)
"
>
<div
class=
"q-pb-md"
>
<div
class=
"MarketVerticalLine"
>
</div>
</div>
...
...
src/views/SellTemplate/Workspace.vue
View file @
c77ae103
<
template
>
<div
class=
"workspace column"
>
<div
class=
"row q-p
t-md q-px-md items-center
"
>
<div
class=
"row q-p
a-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;"
/>
<div
class=
"col text-center"
>
<SearchDocument></SearchDocument>
...
...
@@ -26,7 +26,7 @@
</div>
</el-tooltip>
<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"
>
<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"
>
...
...
@@ -43,7 +43,7 @@
</el-tooltip>
</div>
<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-button
type=
"primary"
>
<div
class=
"row items-center"
style=
"width:188px;"
>
...
...
@@ -54,8 +54,8 @@
</el-button>
<template
#
dropdown
>
<el-dropdown-menu>
<el-dropdown-item>
创建行程
</el-dropdown-item>
<el-dropdown-item>
创建广告图
</el-dropdown-item>
<el-dropdown-item
@
click=
"openMarketHandler(1)"
>
创建行程
</el-dropdown-item>
<el-dropdown-item
@
click=
"openMarketHandler(2)"
>
创建广告图
</el-dropdown-item>
</el-dropdown-menu>
</
template
>
</el-dropdown>
...
...
@@ -88,6 +88,7 @@ import { storeToRefs } from 'pinia';
import
{
ref
}
from
'vue'
;
import
SearchDocument
from
'./components/SearchDocument.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'
;
const
{
userInfo
}
=
storeToRefs
(
userStore
())
...
...
@@ -96,6 +97,10 @@ const currentMenu = ref<number>(0)
const
setCurrentMenuHandler
=
(
i
:
number
)
=>
{
currentMenu
.
value
=
i
}
const
openMarketHandler
=
(
i
:
number
)
=>
{
useSellTemplateStore
().
setSalesEditor
(
i
);
useScreenStore
().
setMarket
(
true
)
}
</
script
>
<
style
scoped
>
@font-face
{
...
...
src/views/SellTemplate/components/Example.vue
View file @
c77ae103
<
template
>
<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>
</
template
>
<
script
setup
lang=
"ts"
>
...
...
src/views/SellTemplate/components/SearchDocument.vue
View file @
c77ae103
<
template
>
<div
class=
"q-pa-md rounded
"
style=
"display: inline-block;"
:class=
"
{'search-range-box':isSearchFocus}"
>
<el-input
size=
"large"
@
focus=
"()=>isSearchFocus=true"
@
blur=
"()=>isSearchFocus=false"
v-model=
"searchKey"
placeholder=
"搜索行程,广告,分享文件"
style=
"width: 38vw;"
>
<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"
v-model=
"searchKey"
placeholder=
"搜索行程,广告,分享文件"
style=
"width: 38vw;"
>
<template
#
prefix
>
<el-icon><Search
style=
"color:var(--el-color-primary);"
/></el-icon>
</
template
>
</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>
</template>
<
script
setup
lang=
"ts"
>
...
...
@@ -12,11 +95,51 @@ import { ref } from 'vue';
import
{
Search
}
from
'@element-plus/icons-vue'
;
const
searchKey
=
ref
<
string
>
(
''
)
const
isSearchFocus
=
ref
(
false
)
const
searchType
=
ref
<
string
>
(
'all'
)
</
script
>
<
style
>
.search-area
{
position
:
absolute
;
top
:
0px
;
left
:
calc
(
50%
-
19vw
-
10px
);
z-index
:
9
;
}
.search-range-box
{
background-color
:
#FFF
;
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
>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment