front-end-of-violet
/
storeindex.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/element-lib/index.js"></script>
    <link rel="stylesheet" href="js/element-lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="css/storeindex.css">
    <script src="js/franchisee.js"></script>
</head>
<style>
    .el-row {
        margin-bottom: 20px;
    }

    .el-col {
        padding: 0;
        margin: 0;
    }

    .total-frame i {
        font-size: 400%;
        color: #409eff;
    }

    .total-frame {
        border: 1px solid #dcdfe6;
        padding: 20px;
        height: 90px;
    }

    .total-title {
        position: relative;
        font-size: 100%;
        color: #909399;
        left: 70px;
        top: -50px;
    }

    .total-value {
        position: relative;
        font-size: 100%;
        color: #606266;
        left: 70px;
        top: -50px;
    }

    .layout-title {
        color: #606266;
        padding: 15px 20px;
        background: #f2f6fc;
        font-weight: 700;
    }

    .color-new-red {
        color: #f56c6c;
    }

    .overview-item-value {
        margin-top: 10px;
        font-size: 24px;
        text-align: center;
    }

    .overview-item-title {
        margin-top: 10px;
        text-align: center;
    }

    .order {
        padding-left: 10px;
        padding-right: 10px;
    }

    .font-medium {
        font-size: 16px;
        color: #606266;
    }

    .un-handle-content {
        padding: 20px 40px;
    }

    .order-value {
        float: right;
    }

    .un-handle-item {
        border-bottom: 1px solid #ebeef5;
        padding: 10px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-image: url(img/homePage1.jpg);
        background-size: cover;
        background-position: center;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-image: url(img/homePage2.jpg);
        background-size: cover;
        background-position: center;
    }

    .el-carousel__item:nth-child(2n+5) {
        background-image: url(img/homePage3.jpg);
        background-size: cover;
        background-position: center;
    }

    .el-carousel__item:nth-child(2n+6) {
        background-image: url(img/homePage4.jpg);
        background-size: cover;
        background-position: center;
    }

    .container {
        display: flex;
        height: 200px;
    }

    .container>div {
        flex: 1;
    }
</style>

<body>
    <div id="app">
        <el-container>
            <el-aside width="31%">
                <el-row :gutter="25">
                    <el-row :span="7">
                        <div class="total-frame">
                            <i class="el-icon-s-order"></i>
                            <div class="total-title">今日份销售额</div>
                            <div class="total-value">({{sale.todayPriceCount}})</div>
                        </div>
                    </el-row>
                    <el-row :span="7">
                        <div class="total-frame">
                            <i class="el-icon-s-order"></i>
                            <div class="total-title">昨日份销售额</div>
                            <div class="total-value">({{sale.yesterdayPriceCount}})</div>
                        </div>
                    </el-row>
                    <el-row :span="7">
                        <div class="total-frame">
                            <i class="el-icon-s-order"></i>
                            <div class="total-title">本月份销售额</div>
                            <div class="total-value">({{sale.thisMonthPriceCount}})</div>
                        </div>
                    </el-row>
                    <el-row :span="7">
                        <div class="total-frame">
                            <i class="el-icon-s-order"></i>
                            <div class="total-title">年度销售额</div>
                            <div class="total-value">({{sale.yearPriceCount}})</div>
                        </div>
                    </el-row>
                </el-row>
            </el-aside>
            <el-container>
                <el-header>
                    <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
                        <el-menu-item index="1" onclick="location.href = 'storeindex.html'">主页</el-menu-item>
                        <el-menu-item index="2" onclick="location.href = 'addOrder.html'">新增订单</el-menu-item>
                        <el-menu-item index="3" onclick="location.href = 'orderManagement.html'">订单管理</el-menu-item>
                        <el-menu-item index="4">库存管理</el-menu-item>
                        <el-menu-item index="5">账号管理</el-menu-item>
                    </el-menu>

                </el-header>
                <el-main>
                    <div>
                        <template>
                            <el-carousel :interval="3000" type="card">
                                <el-carousel-item v-for="item in 4" :key="item">
                                    <h3 class="medium">{{ item }}</h3>
                                </el-carousel-item>
                            </el-carousel>
                        </template>
                    </div>
                    <hr><br><br><br>
                    <h1 style=" font-family: serif; text-align: center; font-size: 40px;">用鲜花点亮生活</h1>
                    <br><br><br>
                    <hr style="margin-left: auto;
                      margin-right: auto;height: 1px; background-color: black; width: 100px;" />
                    <div>
                        <span style="text-align: center;">
                            <br><br><br>
                            <p>尝试在生活的地方放上一瓶鲜花</p>
                            <p>只想好好取悦自己，用鲜花点亮生活，治愈一切</p>
                            <p>订阅FLŌWERPLUS花加，一月四次，一周一束</p>
                            <p>和每个平淡且重复的日子说ByeBye</p>
                        </span>
                    </div>
                    <br><br><br>
                    <div>
                        <img src="img/homePage6.jpg" width="100%" height="600px" />
                    </div>
                    <br><br><br>
                    <div>
                        <h1 style=" font-family: serif; text-align: center; font-size: 40px;">轻松订阅</h1>
                        <br><br><br>
                        <hr style="margin-left: auto;
                      margin-right: auto;height: 1px; background-color: black; width: 100px;" />
                        <span style="text-align: center;">
                            <br><br><br>
                            <p>3步轻松订阅鲜花，简单快速</p>
                            <p>宠爱自己只需5分钟，从现在开始，对自己更好</p>
                        </span>
                    </div>
                    <br><br><br>
                    <div class="container">
                        <div>
                            <div style="text-align: center;">
                                <img src="img/a2.jpg" style="width: 120px;" height="100px" />
                            </div>
                            <br>
                            <br>
                            <div style="text-align: center;">
                                <h4>选择心仪的鲜花包月套餐</h4>
                                <p>我们为你准备了丰富的选择与服务</p>
                                <p>在手机上轻松选购下单</p>
                            </div>
                        </div>
                        <div>
                            <div style="text-align: center;">
                                <img src="img/a3.jpg" style="width: 120px;" height="100px" />
                            </div>
                            <br>
                            <br>
                            <div style="text-align: center;">
                                <h4>设计到采摘，完美服务</h4>
                                <p>花艺师将为你倾心设计本周花束</p>
                                <p>花田最时令的鲜花，全程保鲜至你手上</p>
                            </div>
                        </div>
                        <div>
                            <div style="text-align: center;">
                                <img src="img/a1.jpg" style="width: 120px;" height="100px" />
                            </div>
                            <br>
                            <br>
                            <div style="text-align: center;">
                                <h4>享受一周的美好</h4>
                                <p>收到鲜花，将有详尽实用的插花指南</p>
                                <p>全天小管家为你排忧解难</p>
                            </div>
                        </div>
                    </div>
                    <div>
                        <br><br><br><br>
                        <div>
                            <h1 style=" font-family: serif; text-align: center; font-size: 40px;">100%艺术感</h1>
                            <br><br><br>
                            <hr style="margin-left: auto;
                      margin-right: auto;height: 1px; background-color: black; width: 100px;" />
                            <div>
                                <span style="text-align: center;">
                                    <br><br><br>
                                    <p>FLŌWERPLUS花加已与多位国际花艺大师达成合作</p>
                                    <p>为你每周的花束中增添无穷艺术魅力，体验来自全球的鲜花美学冲击</p>
                                </span>
                            </div>
                        </div>
                        <br><br><br>
                        <div>
                            <img src="img/a4.jpg" width="100%" height="600px" />
                        </div>
                    </div>
                    <br>
                    <div class="container">
                        <div>
                            <div style="text-align: center;">
                                <img src="img/s1.jpg" style="width: 50px;" height="55px" />
                            </div>
                            <div style="text-align: center;">
                                <h4>精选全球A级鲜花</h4>
                                <h4>18道工序 15次质检</h4>
                            </div>
                        </div>
                        <div>
                            <div style="text-align: center;">
                                <img src="img/s2.jpg" style="width: 50px;" height="55px" />
                            </div>
                            <div style="text-align: center;">
                                <h4>国际花艺大师技术支持</h4>
                                <h4>万千搭配 高品位养成</h4>
                            </div>
                        </div>
                        <div>
                            <div style="text-align: center;">
                                <img src="img/s3.jpg" style="width: 50px;" height="55px" />
                            </div>
                            <div style="text-align: center;">
                                <h4>全国包邮 0℃冷链</h4>
                                <h4>极致鲜花保鲜</h4>
                            </div>
                        </div>
                        <div>
                            <div style="text-align: center;">
                                <img src="img/s4.jpg" style="width: 50px;" height="55px" />
                            </div>
                            <div style="text-align: center;">
                                <h4>12,000,000+位用户见证</h4>
                                <h4>口碑相传 五星好评</h4>
                            </div>
                        </div>
                    </div>

                </el-main>
                <el-footer></el-footer>
            </el-container>
        </el-container>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    isCollapse: false,
                    tableData: [
                    ], form: {
                        desc: ""
                    },
                    sale: [],
                    count: 0
                }
            }, created: function () {
                this.selectSale();
            }, methods: {
                selectSale: function () {
                    axios({
                        url: "/sale/overview",
                        method: "GET",
                    }).then(function (resp) {
                        vm.sale = resp.data.data
                    })
                }
            }
        })
    </script>
</body>

</html>