<!DOCTYPE html>
|
<html>
|
<head>
|
<title>首页</title>
|
<script src="../../jsnew/elementDefault.js?v=20220425"></script>
|
<script src="../../jsnew/vue/vue.js"></script>
|
<script src="../../jsnew/vue/element-ui/element-ui_15/index.js"></script>
|
<script src="../../jsnew/myelement.js?v=20220425"></script>
|
<script src="../../jsnew/page.js?v=20220425"></script>
|
<!-- <script src="../../../setting.js"></script> -->
|
|
<link href="../../jsnew/vue/element-ui/element-ui_15/theme-chalk/index.css" rel="stylesheet">
|
<link href="../../jsnew/myelement.css?v=20220426" rel="stylesheet">
|
<link href="../../jsnew/theme.css?v=20220426" rel="stylesheet">
|
<link href="../../css/iconfont.css" rel="stylesheet">
|
<link href="../../jsnew/page.css?v=20220425" rel="stylesheet">
|
<link href="//at.alicdn.com/t/font_2374495_13ltsxm2eor.css" rel="stylesheet">
|
</head>
|
|
<body>
|
<div v-cloak id="vbody">
|
<div class="container">
|
<div class="left">
|
<div class="section">
|
<el-card class="box-card task">
|
<div slot="header" class="clearfix">
|
<i class="el-icon-s-claim"></i>
|
<span>待办</span>
|
</div>
|
<div v-for="o in 6" :key="o" class="text item">
|
{{'列表内容 ' + o }}
|
</div>
|
</el-card>
|
</div>
|
|
<div class="section">
|
<el-card class="box-card public">
|
<div slot="header" class="clearfix">
|
<i class="el-icon-data-analysis"></i>
|
<span>公告</span>
|
</div>
|
<div v-for="o in 4" :key="o" class="text item">
|
{{'列表内容 ' + o }}
|
</div>
|
</el-card>
|
</div>
|
</div>
|
|
<div class="right">
|
<div class="section">
|
<el-card class="box-card convenient">
|
<div slot="header" class="clearfix">
|
<i class="el-icon-thumb"></i>
|
<span>快捷入口</span>
|
</div>
|
<div class="button-container">
|
<!-- <button class="order"><i class="el-icon-shopping-cart-full"></i>订单</button>
|
<button class="agreement"><i class="el-icon-printer"></i>协议</button>
|
<button class="discount"><i class="el-icon-s-goods"></i>折让</button>
|
<button class="plan"><i class="el-icon-trophy"></i>计划</button>
|
<button class="docs"><i class="el-icon-files"></i>文档</button>
|
<button class="approve"><i class="el-icon-s-check"></i>审批中心</button>
|
<button class="settings"><i class="el-icon-s-tools"></i>设置</button> -->
|
<template v-for="quickEntry in quickEntrys">
|
<button :style="{'background-color': quickEntry.backgroundcolor}" @click="topage(quickEntry)"><i class="el-icon-guide"></i>{{quickEntry.name}}</button>
|
</template>
|
|
</div>
|
</el-card>
|
</div>
|
|
<div class="section">
|
<el-card class="box-card warning">
|
<div slot="header" class="clearfix">
|
<i class="el-icon-warning"></i>
|
<span>预警</span>
|
</div>
|
<div v-for="o in 4" :key="o" class="text item">
|
{{'列表内容 ' + o }}
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
<script>
|
function initVue() {
|
new ListVue({
|
el: "#vbody",
|
data: {
|
quickEntrys: [
|
{id:"0007", name:"订单列表", sceneCode: "edit", title: "订单列表", url: "../z_prototype/sale_order_list.html", backgroundcolor: "#cf8a00"},
|
{id:"0008", name:"调货申请", sceneCode: "edit", title: "调货申请", url: "../z_prototype/goods_transfer_apply.html", backgroundcolor: "#3da3cf"},
|
{id:"0009", name:"正负订单申请", sceneCode: "edit", title: "正负订单申请", url: "../z_prototype/returnorder_goods_apply.html", backgroundcolor: "#2e8b57"},
|
|
{id:"0001", name:"商业操作人变更", sceneCode: "add", title: "商业操作人变更", url: "../z_prototype/change_commercial_operator.html", backgroundcolor: "#cf8a00"},
|
{id:"0002", name:"商业详情", sceneCode: "edit", title: "商业详情", url: "../z_prototype/commercial_info.html", backgroundcolor: "#3da3cf"},
|
{id:"0003", name:"新增发货主体", sceneCode: "edit", title: "发货主体清单申请", url: "../z_prototype/delivery_list_apply.html", backgroundcolor: "#2e8b57"},
|
{id:"0004", name:"发货主体详情", sceneCode: "edit", title: "发货主体详情", url: "../z_prototype/delivery_list_info.html", backgroundcolor: "#cf8a00"},
|
{id:"0005", name:"纯销对比", sceneCode: "edit", title: "纯销对比", url: "../z_prototype/puresale_contrast.html", backgroundcolor: "#3da3cf"},
|
{id:"0006", name:"资质申报", sceneCode: "edit", title: "资质申报", url: "../z_prototype/qualifications_edit.html", backgroundcolor: "#2e8b57"},
|
]
|
},
|
|
created() {},
|
|
mounted() {},
|
|
methods:{
|
topage(obj) {
|
var me = this;
|
var text_ = obj.title, id_ = obj.id, url_ = obj.url, sceneCode_ = obj.sceneCode, data_ = {}, delta_ = {};
|
|
var config = {
|
totab: true,
|
icon: "icon-product",
|
text: text_,
|
id: id_,
|
url: url_,
|
sceneCode: sceneCode_,
|
data: data_,
|
delta: delta_,
|
callback: function(obj, callback) {
|
if (callback) {
|
callback();
|
}
|
}
|
};
|
|
me.doPopupByPublic(config);
|
}
|
},
|
});
|
};
|
initVue();
|
</script>
|
|
<style>
|
[v-cloak] {
|
display: none !important;
|
}
|
|
body {
|
font-family: Arial, sans-serif;
|
margin: 0;
|
padding: 0;
|
height: 100vh;
|
}
|
.container {
|
display: flex;
|
flex-wrap: wrap;
|
height: 100%;
|
}
|
.left {
|
flex: 7;
|
padding: 10px;
|
/* background-color: #f2f2f2; */
|
height: 100%;
|
}
|
.right {
|
flex: 3;
|
padding: 10px;
|
/* background-color: #e0e0e0; */
|
height: 100%;
|
}
|
.section {
|
margin-bottom: 20px;
|
}
|
|
.task {
|
height: 325px;;
|
}
|
.public {
|
height: 250px;
|
}
|
.convenient {
|
height: 300px;
|
}
|
.convenient .button-container {
|
height: 220px;
|
overflow: auto;
|
}
|
.warning {
|
height: 275px;
|
}
|
|
.text {
|
font-size: 14px;
|
}
|
|
.item {
|
margin-bottom: 18px;
|
}
|
|
.clearfix:before,
|
.clearfix:after {
|
display: table;
|
content: "";
|
}
|
.clearfix:after {
|
clear: both
|
}
|
|
.box-card {
|
width: 100%;
|
}
|
|
.button-container {
|
display: flex;
|
flex: 1;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
}
|
|
.button-container button {
|
margin: 5px;
|
padding: 5px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 85px;
|
height: 85px;
|
border: 1px solid #ccc;
|
border-radius: 10px;
|
font-size: 15px;
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
color: #fffffe;
|
}
|
|
.order {
|
background-color: SteelBlue;
|
}
|
.agreement {
|
background-color: SeaGreen;
|
}
|
.discount {
|
background-color: DarkOrange;
|
}
|
.plan {
|
background-color: SteelBlue;
|
}
|
.docs {
|
background-color: SeaGreen;
|
}
|
.settings {
|
background-color: DarkOrange;
|
}
|
.approve {
|
background-color: #b4b87e;
|
}
|
|
.button-container button:hover {
|
/* background-color: #a8bb17; */
|
cursor: pointer;
|
transform: translateY(-5px);
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
}
|
|
.button-container i {
|
margin-right: 5px;
|
display: block;
|
text-align: center;
|
font-size: 40px;
|
}
|
|
</style>
|
</body>
|
</html>
|
