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: '配置服务价格', name: '配置服务价格',
component: () => import(/* webpackChunkName: "franchise" */ '../views/ConfigureServicePrices.vue') component: () => import(/* webpackChunkName: "franchise" */ '../views/ConfigureServicePrices.vue')
}, },
{
path: '/siteList',
name: '站点列表',
component: () => import(/* webpackChunkName: "franchise" */ '../views/SiteList.vue')
},
] ]
const router = new VueRouter({ const router = new VueRouter({

3
src/style/theme/common.scss

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

2
src/views/Register.vue

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