Browse Source

首页动画效果及站点列表页面

zq-develop
zq 2 months ago
parent
commit
9dbde44cdd
  1. 1
      src/assets/home/systemIcon.svg
  2. 5
      src/router/index.js
  3. 3
      src/style/theme/common.scss
  4. 32261
      src/style/theme/index.css
  5. 190
      src/views/HomeView.vue
  6. 2
      src/views/Register.vue
  7. 147
      src/views/SiteList.vue
  8. 90
      src/views/elementGroups.vue

1
src/assets/home/systemIcon.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.2 KiB

5
src/router/index.js

@ -54,6 +54,11 @@ const routes = [
name: '配置服务价格',
component: () => import(/* webpackChunkName: "franchise" */ '../views/ConfigureServicePrices.vue')
},
{
path: '/siteList',
name: '站点列表',
component: () => import(/* webpackChunkName: "franchise" */ '../views/SiteList.vue')
},
]
const router = new VueRouter({

3
src/style/theme/common.scss

@ -13,6 +13,9 @@ body {
.ellipsis{
}
.hide{
display: none !important;
}
.column{
display: flex;
flex-direction: column;

32261
src/style/theme/index.css

File diff suppressed because one or more lines are too long

190
src/views/HomeView.vue

@ -5,13 +5,13 @@
<div class="systemNotice common-area">
<h2 class="flex-between">
<b>系统通知</b>
<span @click="lookMoreSystem">查看更多</span>
<span class="hoverCommon" @click="lookMoreSystem">查看更多</span>
</h2>
<div class="systemNotice-main">
<div class="sales-item flex" v-for="(item) in systemList" :key="item.name">
<img :src="require(`@/assets/home/NEW.svg`)" alt="">
<div class="column">
<b>{{ item.label }}</b>
<b class="flex">{{ item.label }} <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> </b>
<p>{{ item.desc }}</p>
</div>
</div>
@ -20,7 +20,7 @@
<div class="salesStatistics common-area">
<h2 class="flex-between">
<b>销售统计 <span>202410-28数据</span></b>
<span @click="lookMoreSystem">查看全部</span>
<span class="hoverCommon" @click="lookMoreSystem">查看全部</span>
</h2>
<div class="salesStatistics-main flex">
@ -45,12 +45,14 @@
</div>
<span>详情</span>
</div>
<div v-for="(item2, index2) in supplyList" :key="index2" class="item-list">
<p class="item-list-name">{{ item2.name }}</p>
<p class="flex-between" v-for="(item3, index3) in item2.list" :key="index3">
{{ item3.name }}
<span>{{ item3.price }}/{{ item3.word }}</span>
</p>
<div class="list-wrap">
<div v-for="(item2, index2) in supplyList" :key="index2" class="item-list">
<p class="item-list-name">{{ item2.name }}</p>
<p class="flex-between" v-for="(item3, index3) in item2.list" :key="index3">
{{ item3.name }}
<span>{{ item3.price }}/{{ item3.word }}</span>
</p>
</div>
</div>
</div>
</div>
@ -61,43 +63,50 @@
<div class="home-main-right">
<div class="accountBalance flex-between common-area">
<span>账户余额&nbsp; <b>4560</b>&nbsp;</span>
<span>展开</span>
<span class="hoverCommon">展开</span>
</div>
<div class="importantReminder common-area">
<h2>重要提醒</h2>
<div class="reminder1 column">
<p>淘宝账号即将过期</p>
<div @click="lookTaoBaoNum">查看</div>
<div style=" background: #fff">
<div class="importantReminder common-area">
<h2>重要提醒</h2>
<div class="reminder1 column">
<p>淘宝账号即将过期</p>
<div @click="lookTaoBaoNum">查看</div>
</div>
<div class="reminder2 column hide">
<p>请尽快建立站点开始售卖</p>
<div @click="lookTaoBaoNum1">立即前往</div>
</div>
</div>
</div>
<div class="carouselImage common-area">
<!-- 轮播图 -->
<img src="@/assets/home/home-right.png" alt="">
</div>
<div class="preferredMarket common-area">
<h2>优选营销</h2>
<div class="column">
<div class="sales-item flex" v-for="(item, index) in preferredMarketList" :key="item.name">
<img :src="require(`@/assets/home/preferredMarket${index + 1}.png`)" alt="">
<div class="column">
<span>{{ item.label }}</span>
<p>{{ item.desc }}</p>
<div class="carouselImage common-area">
<!-- 轮播图 -->
<img src="@/assets/home/home-right.png" alt="">
</div>
<div class="preferredMarket common-area">
<h2>优选营销</h2>
<div class="column">
<div class="sales-item flex" v-for="(item, index) in preferredMarketList" :key="item.name">
<img :src="require(`@/assets/home/preferredMarket${index + 1}.png`)" alt="">
<div class="column">
<span class="flex">{{ item.label }} <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt="">
</span>
<p>{{ item.desc }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="usageGuide common-area">
<h2 class="flex-between">
<b>使用指南</b>
<span>查看全部</span>
</h2>
<p>我想将商品绑定淘宝店应该怎么做</p>
<p>基于成交量的推广支持</p>
<p>二级裂变分销发展代理网络</p>
</div>
<div class="customWrap common-area">
<h2>联系客服</h2>
<img src="@/assets/home/customer.png" alt="">
<div class="usageGuide common-area">
<h2 class="flex-between">
<b>使用指南</b>
<span class="hoverCommon">查看全部</span>
</h2>
<p>我想将商品绑定淘宝店应该怎么做</p>
<p>基于成交量的推广支持</p>
<p>二级裂变分销发展代理网络</p>
</div>
<div class="customWrap common-area">
<h2>联系客服</h2>
<img src="@/assets/home/customer.png" alt="">
</div>
</div>
</div>
@ -260,6 +269,9 @@ export default {
lookTaoBaoNum() {
//
},
lookTaoBaoNum1() {
//
},
lookMoreSystem() {
// -
},
@ -273,6 +285,12 @@ export default {
.home-wrap {
padding: 12px;
.hoverCommon {
&:hover {
color: #006AFF !important;
}
}
.home-main {
width: 100%;
display: flex;
@ -332,6 +350,26 @@ export default {
justify-content: flex-start;
padding: 18px 12px;
box-sizing: border-box;
transition: all .3s;
.systemIcon {
display: none;
width: 12px;
height: 8px;
}
&:hover {
background: #F6F7FA;
b {
color: #006AFF;
}
.systemIcon {
margin-left: 12px;
display: block;
}
}
div {
width: calc(100% - 30px);
@ -374,6 +412,13 @@ export default {
width: 25%;
justify-content: flex-start;
padding: 14px 12px;
transition: all .3s;
&:hover {
border-radius: 8px;
/* middle/middle_grey_1 */
background: #F6F7FA;
}
}
}
@ -473,8 +518,8 @@ export default {
/* 在 1440px 屏幕下的固定宽度 */
.common-area {
background: #fff;
padding: 20px 12px;
padding: 20px 0px;
margin: 0 14px;
text-align: left;
font-size: 14px;
line-height: normal;
@ -486,7 +531,8 @@ export default {
margin: 0;
font-size: 16px;
color: #1E2226;
span{
span {
font-size: 14px;
color: #8A9099;
font-weight: normal;
@ -496,8 +542,10 @@ export default {
.accountBalance {
padding: 27px 14px;
margin: 0;
margin-bottom: 12px;
align-items: baseline;
background: #fff;
b {
font-family: D-DIN;
@ -516,12 +564,23 @@ export default {
}
.importantReminder {
.reminder1 {
border-bottom: 1px solid #EAECF0;
.reminder1,
.reminder2 {
border-radius: 4px;
background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%);
padding: 14px 8px;
border: 1px solid transparent;
margin-top: 20px;
&:hover {
border-radius: 4px;
background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%);
/* main/main_erro */
border: 1px solid #FF4D4F;
}
div {
display: flex;
justify-content: flex-end;
@ -532,14 +591,17 @@ export default {
}
}
.carouselImage{
.carouselImage {
padding-bottom: 0;
img{
img {
width: 100%;
}
}
.preferredMarket {
border-bottom: 1px solid #EAECF0;
h2 {
margin-bottom: 20px;
}
@ -549,10 +611,27 @@ export default {
color: #8A9099;
font-size: 12px;
.systemIcon {
display: none;
width: 12px;
height: 8px;
margin-left: 12px;
}
span {
font-size: 14px;
color: #1F2026;
}
&:hover {
.systemIcon {
display: block;
}
span {
color: #006AFF;
}
}
}
img {
@ -563,6 +642,10 @@ export default {
}
.customWrap {
h2 {
margin-bottom: 20px;
}
img {
/* 自动布局子元素 */
width: 106px;
@ -570,13 +653,18 @@ export default {
z-index: 0;
}
}
.usageGuide{
h2{
.usageGuide {
border-bottom: 1px solid #EAECF0;
h2 {
margin-bottom: 20px;
}
p{
p {
margin-bottom: 10px;
&:last-child{
&:last-child {
margin-bottom: 0;
}
}

2
src/views/Register.vue

@ -756,7 +756,7 @@ export default {
},
],
currentPage: 1, //
pageSize: 5, //
pageSize: 1, //
total: 0, //
dialogVisible: false,//
showCancelButton: true, //

147
src/views/SiteList.vue

@ -1 +1,148 @@
<!-- 站点列表 -->
<!-- :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
:filter-method="filterHandler" -->
<template>
<div class="siteList-wrap">
<el-table :data="tableData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"
:key="random()">
<!-- 其他列 -->
<el-table-column prop="name" label="站点简称" width="210">
<template slot-scope="scope">
<div class="flex">
<span :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助'
}}</span>
<span class="">{{ scope.row.name }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="stock" label="今日供货价">
<template slot-scope="scope">
<div class="flex cell_render">
<span>¥{{ scope.row.stock }}/</span>
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
</div>
</template>
</el-table-column>
<!-- 价格列 -->
<el-table-column label="售价">
<template v-slot="{ row, $index }">
<el-popover v-model="row.price_popover" placement="top" trigger="manual" :ref="`popover-${$index}`"
@show="popshow">
<!-- 弹框内容 -->
<div style="text-align: center">
<GuipInput ref="GuipInput" v-if="!row.word" width="252px" v-model="row.edit_price" label="售价"
placeholder="请输入售价" unit="元">
</GuipInput>
<div v-else class="flex">
<GuipInput ref="GuipInput" width="133px" v-model="row.edit_price" label="售价" placeholder="请输入售价"
unit="元">
</GuipInput>
<span class="shortspan">/</span>
<GuipInput ref="GuipInput" width="133px" v-model="row.edit_word" placeholder="请输入字符" unit="字符">
</GuipInput>
</div>
<!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> -->
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
<GuipButton size="medium" @click="cancelEdit(row, 'price')">取消</GuipButton>
<GuipButton type="primary" @click="savePrice(row, 'price')" size="medium">确定</GuipButton>
</div>
</div>
<!-- 触发弹框的按钮 -->
<span slot="reference" @click="handlePriceClick(row, $index, 'price')">
<div class="flex cell_render">
<span v-if="row.word" :key="random()">¥{{ row.price }}/{{ row.word }}</span>
<span v-else :key="random()">¥{{ row.price }}/</span>
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
</div>
</span>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="stock" label="排序">
<template v-slot="{ row, $index }">
<el-popover v-model="row.num_popover" placement="top" trigger="manual" :ref="`popover-${$index}`"
@show="popshow">
<!-- 弹框内容 -->
<div style="text-align: center">
<GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" label="排序" placeholder="请输入数字">
</GuipInput>
<p style=" width: 252px;
margin-left: 40px;
text-align: right;color: #8A9099;letter-spacing: 0.08em;">输入0的数越小排序越前重复则新者优先0则默认排序</p>
<!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> -->
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
<GuipButton size="medium" @click="cancelEdit(row, 'num')">取消</GuipButton>
<GuipButton type="primary" @click="savePrice(row, 'num')" size="medium">确定</GuipButton>
</div>
</div>
<!-- 触发弹框的按钮 -->
<span slot="reference" @click="handlePriceClick(row, $index, 'num')">
<div class="flex cell_render">
<span>{{ row.num }}</span>
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
</div>
</span>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="stock" label="收款方式" width="195">
<template slot-scope="scope">
<div class="flex cell_render" @click="popPayMentModal(scope.row)">
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{ scope.row.payment
==
'0' ? '默认站点支付' : '自定义支付' }}</span>
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
</div>
</template>
</el-table-column>
<el-table-column prop="stock" label="状态">
<!-- <template slot-scope="scope">
<GuipSwitch :modelValue="scope.row.homeFlag" @change="onSwitchChange(scope.row)">
</GuipSwitch>
</template> -->
</el-table-column>
<el-table-column fixed="right" label="操作" width="112">
<template slot-scope="scope">
<div class="flex">
<el-button type="text">服务列表</el-button>
<el-button @click="handleClick(scope.row)" type="text">站点设置</el-button>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
:total="tableData1.length">
</el-pagination>
<Footer></Footer>
</div>
</template>
<script>
import Footer from '@/components/Footer.vue';
export default {
name: 'HomeView',
data() {
return {
tableData1:[],
}
},
components: {
// HelloWorld
Footer,
},
methods: {
random() {
var randomNumber = Math.random();
return randomNumber
},
}
}
</script>
<style lang="scss">
</style>

90
src/views/elementGroups.vue

@ -13,14 +13,21 @@
<GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
defaultValue="选项1" />
</div>
<div >
<div>
<h3 for="">表格(表头自定义自定义渲染固定列)</h3>
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
<GuipTable :tableData="tableData" ref="multipleTable" @selectChange="handleSelectionChange"
:multiple="true" autoColumn="true" width="900px">
<template slot="header">
<el-table-column fixed prop="date" label="日期" width="180"></el-table-column>
<el-table-column fixed prop="date" label="日期" width="180">
<template slot="header" slot-scope="scope">
<span>日期</span>
<el-button @click="handleFilter(scope.column)" icon="el-icon-search"
size="mini"></el-button>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="150"></el-table-column>
<el-table-column prop="name1" label="姓名" width="150"></el-table-column>
<el-table-column prop="name2" label="姓名" width="150"></el-table-column>
@ -68,22 +75,22 @@
</GuipTable>
</div>
<div >
<div>
<h3 for="">表格(带气泡框),内容自定义</h3>
<GuipTable :tableData="tableData" :key="random()" ref="multipleTable" @selectChange="handleSelectionChange" :multiple="true"
autoColumn="true" width="900px" :columns="columns" @confirm="onConfirm"
@cancel="onCancel">
<!-- 自定义姓名列的气泡框内容 -->
<GuipTable :tableData="tableData" :key="random()" ref="multipleTable"
@selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px"
:columns="columns" @confirm="onConfirm" @cancel="onCancel">
<!-- 自定义姓名列的气泡框内容 -->
<template #popover-content-name="{ row, column }">
<div>
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="排序" :prop="column.label"
placeholder="这是" />
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="排序"
:prop="column.label" placeholder="这是" />
</div>
</template>
<template #popover-content-age="{ row, column }">
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="年龄" :prop="column.label"
placeholder="这是" unit="岁" >
</GuipInput>
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="年龄"
:prop="column.label" placeholder="这是" unit="岁">
</GuipInput>
</template>
<!-- 自定义地址列的气泡框内容 -->
<template #popover-content-address="{ row, column }">
@ -208,10 +215,10 @@
</div>
<div class="ele-item">
<label for="">开关L</label>
<GuipSwitch v-model="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
<label for="">开关L</label>
<GuipSwitch v-model="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
<el-button type="primary" @click="submitForm">表单Submit</el-button>
</el-form>
@ -219,13 +226,9 @@
--------------------分割线0------------------------------</div>
<div style="display: flex;">
<el-date-picker
v-model="date1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<el-date-picker v-model="date1" type="daterange" range-separator="" start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<!-- <GuipButton type="primary" @click="showModal">弹框</GuipButton>
<GuipButton type="primary" @click="showMessage">轻提示</GuipButton>
<GuipButton type="primary" @click="getFormdata">提交</GuipButton> -->
@ -307,7 +310,7 @@ export default {
data() {
return {
date1:'',
date1: '',
switchValue: true,
dialogVisible: true,//
showCancelButton: true, //
@ -317,10 +320,10 @@ export default {
language: '',
},
languageOptions: [
{ label: 'JavaScript', value: 'js',selectedLabel:'JavaScripthhhhhhhhhh' },
{ label: 'Python', value: 'py',selectedLabel:'JavaScripthhhhhhhhhh' },
{ label: 'Java', value: 'java', disabled: true,selectedLabel:'JavaScripthhhhhhhhhh' }, //
{ label: 'Go', value: 'go' ,selectedLabel:'JavaScripthhhhhhhhhh' },
{ label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh' },
{ label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh' },
{ label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh' }, //
{ label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh' },
],
rules: {
username: [
@ -376,7 +379,7 @@ export default {
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price: '20',
age:20,
age: 20,
//
edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
}, {
@ -384,7 +387,7 @@ export default {
name: '王小虎11',
address: '上海市普陀区金沙江路 151811 弄',
price: '10',
age:30,
age: 30,
edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
}, {
@ -492,36 +495,40 @@ export default {
options: [{
value: '选项1',
label1:'黄金hhhhhh',
label1: '黄金hhhhhh',
label: '黄金糕'
}, {
value: '选项2',
label1:'双皮奶hhhhhhhhh',
label1: '双皮奶hhhhhhhhh',
label: '双皮奶'
}, {
value: '选项3',
label1:'蚵仔煎hhhhhhhhh',
label1: '蚵仔煎hhhhhhhhh',
label: '蚵仔煎'
}, {
value: '选项4',
label1:'双皮奶hhhhhhhhh',
label1: '双皮奶hhhhhhhhh',
label: '龙须面'
}, {
value: '选项5',
label1:'双皮奶hhhhhhhhh',
label1: '双皮奶hhhhhhhhh',
label: '北京烤鸭'
}],
}
},
methods: {
handleFilter(column) {
//
console.log('筛选列:', column);
},
// key
random(){
random() {
var randomNumber = Math.random();
return randomNumber
},
onSwitchChange(value) {
console.log('Switch 状态变化:',this.switchValue, value);
console.log('Switch 状态变化:', this.switchValue, value);
},
// ---start
openDialog() {
@ -559,14 +566,14 @@ export default {
onConfirm(row, prop) {
console.log('确认修改:', row, prop);
this.$message.success('修改成功');
this.$set(this.tableData,row)
console.log(this.tableData,'this.tableData=====');
this.$set(this.tableData, row)
console.log(this.tableData, 'this.tableData=====');
},
//
onCancel(row, prop) {
console.log('取消修改:', row, prop);
this.$message.info('已取消');
this.$set(this.tableData,row)
this.$set(this.tableData, row)
},
// -----
@ -653,6 +660,7 @@ export default {
/* width: 100%; */
padding: 30px 40px;
background: #fff;
.ele-item {
display: flex;
align-items: center;
@ -687,6 +695,4 @@ export default {
text-align: right;
justify-content: center;
}
</style>
Loading…
Cancel
Save