Skip to content

P
pptist
Commit 3c3ddc8b authored by zhengke's avatar zhengke
Browse files
Options

首页局部调整样式

parent b3ff5d7c
Hide whitespace changes
Inline Side-by-side
Showing with 376 additions and 53 deletions
src/assets/styles/common.css
View file @ 3c3ddc8b
......@@ -244,6 +244,9 @@ page {
.grow{
flex-grow: 1;
}
.shrink{
flex-shrink: 0;
}
.text-bold{
font-weight: 600;
}
......@@ -348,6 +351,12 @@ page {
.q-pr-md{
padding-right: 10px;
}
.q-pr-36{
padding-right: 36px;
}
.q-pr-33{
padding-right: 33px;
}
.q-pl-sm{
padding-left: 5px;
}
......@@ -482,4 +491,9 @@ page {
.el-tree.auto-width-tree li span{
font-size: 12px;
font-weight: normal !important;
}
.TranLine{
width: 100%;
height: 1px;
background: #EDEDED;
}
\ No newline at end of file
src/views/Market/Index.vue
View file @ 3c3ddc8b
<template>
<div ref="marketRef" style="background: #f3f6fb;height:100vh;overflow: auto;">
<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> -->
<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">
<div ref="marketRef" class="Market-from">
<div class="Market-fromBj"></div>
<div class="relative" style="padding: 22px; max-width:1440px; margin:0 auto;z-index: 2;">
<div class="row items-center">
<img class="q-pr-36" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" style="height: 30px;" />
<!-- <el-input v-model="queryObj.Title" placeholder="输入模板关键字快速查找"
class="input-with-select q-pr-33">
<template #append>
<el-button type="primary" @click="queryObj.pageIndex=1,queryTemplateBySearchHandler()">搜索</el-button>
</template>
</el-input> -->
<div class="row grow Market-select reactive">
<el-input v-model="queryObj.Title" placeholder="请输入关键字" class="input-with-select q-pr-33">
<template #append>
<el-button type="primary" @click="queryObj.pageIndex=1,queryTemplateBySearchHandler()">搜索</el-button>
<div class="Market-select-line absolute"></div>
<div class="row items-center pointer">
<img src="../../assets/img/home-search.png" width="21" height="21"
@click="queryObj.pageIndex=1,queryTemplateBySearchHandler()"/>
</div>
</template>
</el-input>
</el-col>
<el-col :span="6" style="text-align: right;">
<el-dropdown split-button
size="small" type="primary"
v-if="userInfo.isTemplate==1 && model==1"
@click="addTemplate(1)">
<span style="font-size: 23px;margin-right: 10px;"> + </span> <span>创建</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<el-button type="primary" size="small"
@click.stop="addTemplate(1)" style="color: #ffff;">
创建模版
</el-button>
</el-dropdown-item>
<el-dropdown-item v-if="true">
<el-button type="primary" size="small"
@click.stop="addTemplate(2)" style="color: #ffff;">
创建广告
</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button v-if="SalesEditor>0"
v-tooltip="SalesBack==1?'返回到上页':'返回到首页'" type="primary"
size="small"
@click="CloseTemplate()" style="color: #ffff;">返回
<el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
</el-button>
</el-col>
</el-row>
</div>
<div class="shrink row items-center" style="text-align: right;">
<div>
<div class="MarketAdd pointer" @click="addTemplate">创建</div>
</div>
<div class="MarketPopover">
<el-dropdown class="q-pl-md" trigger="click" >
<div class="Marketfigure pointer">
<img class="reactive" src="../../assets/img/figure.png"/>
</div>
<template #dropdown>
<div class="MarketfigurePopover">
<div class="row">
<div class="MarketfigureMin pointer">
<img class="reactive" src="../../assets/img/figure.png"/>
</div>
<div>
<div class="row items-center MarketfigureName">
<span>Ranjunjun</span>
<img src="../../assets/img/homeVip1.png" width="65" height="16"/>
</div>
<div class="row MarketfigurePhon">
<span>ID：123453789</span>
<span>电话：180****1613</span>
</div>
</div>
</div>
<div class="MarketEquity">
<div class="MarketEquityNum">
<span>功能权益</span>
<span>5+</span>
</div>
<div class="MarketEquityTime">有效期至2024.07.03</div>
</div>
<div class="MarketCapacity">
<div>
<el-progress :percentage="100" color="#0A5EF9" :stroke-width="8" text-inside
:format="format">
</el-progress>
</div>
<div class="MarketCapacityNum row flex-between">
<span>7.88 GB / 1.34 TB</span>
<span>容量管理</span>
</div>
</div>
<div class="MarketFootmark row items-center flex-between">
<div>
<span>足迹</span>
<b>10</b>
</div>
<div>
<span>收藏</span>
<b>10</b>
</div>
<div>
<span>共享</span>
<b>10</b>
</div>
</div>
<div class="TranLine"></div>
<div class="MarketSettings row flex-between">
<span>账号设置</span>
<span class="pointer">退出登录</span>
</div>
</div>
</template>
</el-dropdown>
<!--
<Popover trigger="click" placement="bottom-start"
v-model:value="personVisible" center
:popper-style="{ 'border-radius': '8px' }">
<template #content>
<div class="MarketfigurePopover">
<div class="row">
<div class="MarketfigureMin pointer">
<img class="reactive" src="../../assets/img/figure.png"/>
</div>
<div>
<div class="row items-center MarketfigureName">
<span>Ranjunjun</span>
<img src="../../assets/img/homeVip1.png" width="65" height="16"/>
</div>
<div class="row MarketfigurePhon">
<span>ID：123453789</span>
<span>电话：180****1613</span>
</div>
</div>
</div>
<div class="MarketEquity">
<div class="MarketEquityNum">
<span>功能权益</span>
<span>5+</span>
</div>
<div class="MarketEquityTime">有效期至2024.07.03</div>
</div>
<div class="MarketCapacity">
<div>
<el-progress :percentage="100" color="#0A5EF9" :stroke-width="8" text-inside
:format="format">
</el-progress>
</div>
<div class="MarketCapacityNum row flex-between">
<span>7.88 GB / 1.34 TB</span>
<span>容量管理</span>
</div>
</div>
<div class="MarketFootmark row items-center flex-between">
<div>
<span>足迹</span>
<b>10</b>
</div>
<div>
<span>收藏</span>
<b>10</b>
</div>
<div>
<span>共享</span>
<b>10</b>
</div>
</div>
<div class="TranLine"></div>
<div class="MarketSettings row flex-between">
<span>账号设置</span>
<span class="pointer">退出登录</span>
</div>
</div>
</template>
<div class="Marketfigure pointer">
<img class="reactive" src="../../assets/img/figure.png"/>
</div>
</Popover> -->
</div>
<el-icon class="pointer" size="26" color="#070707"><MoreFilled /></el-icon>
</div>
</div>
<div class="q-mt-lg bg-white rounded text-nowrap marketTag" style="padding: 20px 20px 0 20px;">
<div class="row text-small items-center nowrap">
<span style="margin-right: 30px;">适用线路：</span>
......@@ -184,9 +295,12 @@
</div>
</div>
<div style="margin-top: 20px;">
<div v-if="dataList.length>0" class="q-mt-lg row wrap rounded">
<!-- q-mt-lg row wrap -->
<div v-if="dataList.length>0" class=" rounded"
style="column-count: 6;">
<template v-for="(item,index) in dataList">
<div class="MarketIndexListBox bg-white rounded">
<div class="MarketIndexListBox bg-white rounded"
style="grid-row-start: auto;margin-bottom: 20px;break-inside: avoid;">
<div class="MarketIndexList-Hover">
<div>
<el-button class="MarketIndexButtom" type="primary"
......@@ -246,6 +360,7 @@ import { storeToRefs } from "pinia";
import { injectKeyTemplate } from '@/types/injectKey'
import { createOpEditorLink, createSaleCreateLink, managerTemplateLink, query } from '@/utils/common'
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
const {
......@@ -273,6 +388,10 @@ const { market, ConfigId} = storeToRefs(useScreenStore())
const SalesEditorStore = useSellTemplateStore()
const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
const personVisible = ref(false)
const format = (percentage: number) => {
return percentage == 100 ? '' : ``
}
const model = ref(2)
const showCurrentTemplate = ref<any>()
......@@ -540,6 +659,194 @@ onMounted(()=>{
url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
font-display: swap;
}
.MarketPopover ::v-deep(.popover-content){
border-radius: 8px;
}
.MarketSettings span:last-child{
font-weight: 400;
color: #B4B4B4;
}
.MarketSettings span:first-child{
font-weight: 500;
color: #000000;
}
.MarketSettings span{
font-family: PingFang SC;
font-size: 14px;
padding: 10px 0 20px 20px;
}
.MarketSettings{
margin-top: 9px;
}
.MarketFootmark b{
color: #0A5EF9;
margin-left: 5px;
}
.MarketFootmark span{
font-size: 14px;
color: #000000;
font-family: PingFang SC;
}
.MarketFootmark{
width: 100%;
padding: 18px 21px;
background: #eee;
border-radius: 8px;
margin-top: 28px;
margin-bottom: 39px;
}
.MarketCapacityNum span:last-child{
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #5F68E5;
}
.MarketCapacityNum span:first-child{
font-family: PingFang SC;
font-weight: bold;
font-size: 14px;
color: #4E4E4E;
}
.MarketCapacityNum{
margin-top: 10px;
}
.MarketEquityTime{
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
color: #8AA3CC;
}
.MarketEquityNum span:last-child{
margin-left: 12px;
}
.MarketEquityNum{
height: 14px;
font-family: PingFang SC;
font-weight: bold;
font-size: 14px;
color: #000000;
margin-bottom: 12px;
}
.MarketEquity{
height: 68px;
background: url('../../assets/img/home-quanyi.png') no-repeat;
background-size: 100% 100%;
padding: 18px 13px;
margin-top: 29px;
margin-bottom: 30px;
}
.MarketfigureName{
font-family: PingFang SC;
font-weight: bold;
font-size: 18px;
color: #000000;
margin-top: 3px;
}
.MarketfigureMin img{
margin-top: 18px;
}
.MarketfigurePhon span:last-child{
margin-left: 20px;
}
.MarketfigurePhon{
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
color: #B4B4B4;
margin-top: 5px;
}
.MarketfigureMin{
background: #E6DDF5;
width: 52px;
height: 52px;
border-radius: 50%;
text-align: center;
margin-right: 10px;
overflow: hidden;
}
.MarketfigurePopover{
padding: 14px 20px 0 20px;
}
.Marketfigure:hover img{
animation:myfirst 1s;
-webkit-animation:myfirst 1s;
}
.Marketfigure img{
margin-top: 6px;
}
@keyframes myfirst
{
from {margin-top:25px;}
to {margin-top:6px;}
}
@-webkit-keyframes myfirst
{
from {margin-top: 25px;}
to {margin-top:6px;}
}
.Marketfigure{
background: #E6DDF5;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
margin-left: 30px;
margin-right: 22px;
overflow: hidden;
}
.Market-select-line{
width: 1px;
height: 14px;
background: #F4F4F4;
right: 61px;
}
.Market-select ::v-deep(.el-input__wrapper){
box-shadow: 0 0 0;
border-radius: 8px 0 0 8px;
padding: 1px 23px;
}
::v-deep(.el-input__wrapper):hover{
box-shadow: 0 0 0;
}
::v-deep(.el-input__wrapper.is-focus){
box-shadow: 0 0 0;
}
::v-deep(.el-input-group__append){
box-shadow: 0 0 0;
background: #fff;
}
.input-with-select{
height: 46px;
}
.MarketAdd{
width: 90px;
height: 36px;
background: linear-gradient(134deg, #649DED, #570AD8);
border-radius: 8px;
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
color: #FFFFFF;
line-height: 32px;
text-align: center;
}
.Market-fromBj{
height: 486px;
background: url('../../assets//img/homeBJ.png') no-repeat;
background-size: auto 100%;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1;
}
.Market-from{
/* background: #f3f6fb; */
background: linear-gradient(0deg, #FFF, #E3ECFF);
height:100vh;
overflow: auto;
}
.marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
padding: 5px 8px;
}
......@@ -587,8 +894,8 @@ onMounted(()=>{
font-size: 12px !important;
}
.MarketIndexListBox{
width:calc(20% - 10px);
margin: 10px 10px 0 0;
/* width:calc(20% - 10px); */
/* margin: 10px 10px 0 0; */
padding:5px;
position: relative;
overflow: hidden;
......@@ -633,10 +940,10 @@ onMounted(()=>{
}
.MarketIndexList-img{
width: 100%;
height: 0;
/* height: 0;
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
overflow: hidden; */
border-radius: 4px;
}
.MarketIndexList-img img{
......@@ -645,17 +952,19 @@ onMounted(()=>{
left: 0;
height: 100%; */
width: 100%;
height: auto;
position: absolute;
/* height: auto;
position: absolute; */
object-fit: cover;
}
.MarketIndexList-text{
font-size: 14px;
padding: 10px;
padding-bottom: 5px;
}
.MarketIndexList-text span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px;
padding-bottom: 5px;
}
.MarketVerticalLine{
width: 1px;
......
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