<!-- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="swmrecognizeproject.page.xiaojiaolou._default" %> -->

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="./assets/css/minireset.css" />
    <link rel="stylesheet" href="./assets/css/main.css" />
    <script src="./assets/js/vue.js"></script>
    <title>小角楼</title>
    
</head>
<body>
    <div id="app">
        <div v-if="page === 0" class="vote-page">
            <img src="./assets/vote/bg.png"  style="width: 100vw;position:absolute;top: 0;z-index: -1;"/>
            <!-- <div style="width: 100vw;position:absolute;top: 0;z-index: -1;text-align:center;">
                <img src="./assets/vote/lantern.png"  />
                <img src="./assets/vote/center-text.png"  style="width: 80%;margin-top: -100px;"/>
            </div> -->
            <div style="text-align:center;margin-bottom:20vh;">
                <img src="./assets/vote/lantern.png"  />
                <img src="./assets/vote/center-text.png"  style="width: 80%;margin-top: -100px;"/>
                <img src="./assets/vote/family.png" style="margin: 20px 0;"/>
                <div style="margin-top:5vh;">
                    <img src="./assets//vote/title.png" style="width: 200px;"/>
                    <div style="padding: 0 1rem;">
                        <img src="./assets/vote/rule.png" style="margin:1rem 0;" />
                        <img src="./assets/vote/bottles.png" />
                        <div class="history-info">
                            <div style="display: grid;grid-template-columns: repeat(3, 1fr);">
                                <div class="history-info-title">
                                    <img src="./assets/vote/user.png" style="width:15px;" />
                                    参赛作品
                                </div>
                                <div class="history-info-title">
                                    <img src="./assets/vote/calendar.png" style="width:15px;" />
                                    累计投票
                                </div>
                                <div class="history-info-title">
                                    <img src="./assets/vote/eye.png" style="width:15px;" />
                                    访问量
                                </div>
                            </div>
                            <div style="display: grid;grid-template-columns: repeat(3, 1fr);">
                                <div class="history-info-title">
                                    1
                                </div>
                                <div class="history-info-title">
                                    2
                                </div>
                                <div class="history-info-title">
                                    3
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;margin:1rem 0;">
                            <input placeholder="输入姓名或编号" class="search-input"/>
                            <div class="search-btn">
                                搜索
                            </div>
                        </div> 
                    </div>
                </div>

            </div>

        </div>
        <div v-if="page === 1" class="enroll-page">
            <div style="display: flex;justify-content:center;align-items:center;padding: 1.5rem 0;">
                <img src="./assets/enroll/title.png" style="width: 200px;"/>
            </div>
            <div style="padding: 1rem;">
                <div style="background: #fdefd9;border-radius: 7px; padding: 0.5rem;margin-bottom: 20vh;">
                    <div class="enroll-item">
                        <div class="enroll-item-title">作品名称</div>
                        <div><input placeholder="请填写作品名称" class="enroll-input" v-model="form_workname" /></div>
                    </div>
                    <div class="enroll-item">
                        <div class="enroll-item-title">手机号</div>
                        <div><input placeholder="请填写手机号" type="number" class="enroll-input" v-model="form_phone" /></div>
                    </div>
                    <div class="enroll-item">
                        <div class="enroll-item-title">收货地址及姓名</div>
                        <div><input placeholder="请填写收货地址及姓名" class="enroll-input" v-model="form_address_and_name"/></div>
                    </div>
                    <div style="display: flex;justify-content:center;align-items:center;text-align:center;">
                        <div>
                            <div style="width: 100px;height: 100px;background: #fff;display:grid;place-items:center;margin:0.5rem 0;box-shadow:1px 1px 7px #666666;border-radius:5px;">
                                +
                            </div>
                            <div style="color: #b02a1e;font-weight:bold;letter-spacing:1px;">
                                点击添加照片
                            </div>
                        </div>

                    </div>
                    <div style="display: flex;justify-content:center;align-items:center;padding: 1.5rem 0;">
                        <img src="./assets/enroll/submit.png" style="width: 150px;"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="rule-page" v-if="page === 2">
            <div style="display: flex;justify-content:center;align-items:center;padding: 1.5rem 0;">
                <img src="./assets/rule/title.png" style="width: 200px;"/>
            </div>
            <div style="padding: 1rem;">
                <div class="rule-item">
                    <div>
                        <img src="./assets/rule/bonus.png"/>
                    </div>
                    <div style="display: flex;justify-content:space-between;font-size:0.7rem;margin:0.2rem 0;" v-for="(v, i) in bonus_data">
                        <div style="display:flex;">
                            <div style="width: 4em;">{{v.level}}:</div><div>{{v.name}}</div>
                        </div>
                        <div style="">
                            {{v.description}}
                        </div>
                    </div>
                </div>
                <div class="rule-item">
                    <div>
                        <img src="./assets/rule/date.png" />
                    </div>
                    <div style="font-size: 0.7rem;">
                        2022年1月31日-2022年2月7日
                    </div>
                </div>
                <div class="rule-item">
                    <div>
                        <img src="./assets/rule/zone.png" />
                    </div>
                    <div style="font-size: 0.7rem;">
                        巴中市区 平昌县 通江县 南江县
                    </div>
                </div>
                <div class="rule-item">
                    <div>
                        <img src="./assets/rule/vote.png" />
                    </div>
                    <div style="font-size: 0.7rem;">
                        每个微信号ID每日可投3票
                    </div>
                </div>
                <div class="rule-item">
                    <div>
                        <img src="./assets/rule/enroll.png" />
                    </div>
                    <div style="font-size: 0.7rem;">
                        <p>1、参赛照片须包含翰林坊系列、小角楼系列；</p>
                        <p>2、照片中不得出现其他白酒品牌，否则视为无效</p>
                        <p>3、参赛照片禁止出现未成年人，如出现此类照片视为无效；</p>
                        <p>4、每个微信号ID只可上传一个作品；</p>
                        <p>5、禁止通过非正常手段刷票，如发现作弊情况取消参赛资格；</p>
                        <p>6、奖品按照投票排名发放，活动结束后在小角楼酒业公司微信公众号平台予以公示；</p>
                        <p>7、本次活动最终解释权归小角楼酒业有限公司所有。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="rank-page" v-if="page === 3">
            <div style="display: flex;justify-content:center;align-items:center;padding: 1.5rem 0;">
                <img src="./assets/rank/title.png" style="width: 200px;"/>
            </div>
            <div style="padding: 1rem;">
                <div style="background: #fdefd9; border-radius: 7px; padding: 0.5rem;margin-bottom: 20vh;">
                    <div style="display: flex;text-align:center;font-weight:bold;color:#b02a1e;">
                        <div style="flex-basis: 4rem;">
                            排名
                        </div>
                        <div style="flex-grow: 1;">
                            昵称
                        </div>
                        <div style="flex-basis: 4rem;">
                            获得票数
                        </div>
                    </div>
                    <div style="display: flex; text-align: center;padding: 0.3rem 0;" v-for="(v,i) in rank_data">
                        <div style="flex-basis: 4rem;font-weight: bold;">
                            {{v.rank}}
                        </div>
                        <div style="flex-grow: 1;">
                            {{v.nickname}}
                        </div>
                        <div style="flex-basis: 4rem;">
                            {{v.count}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-bar">
            <div>
                <img :src="formatNavImgUrl(0)" data-index="0" @click="switchPage" class="item"/>
                <div :style="formatNavTextStyle(0)">投票</div>
            </div>
            <div>
                <img :src="formatNavImgUrl(1)" data-index="1" @click="switchPage" class="item"/>
                <div :style="formatNavTextStyle(1)">报名</div>
            </div>
            <div>
                <img :src="formatNavImgUrl(2)" data-index="2" @click="switchPage" class="item"/>
                <div :style="formatNavTextStyle(2)">活动规则</div>
            </div>
            <div>
                <img :src="formatNavImgUrl(3)" data-index="3" @click="switchPage" class="item"/>
                <div :style="formatNavTextStyle(3)">排行榜</div>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    page: 0,

                    // 报名表格
                    form_workname: '',
                    form_phone: '',
                    form_address_and_name: '',

                    bonus_data: [
                        { "level": "一等奖", "name": "翰林坊·青御礼赠（巴中名片）666ml×2", "description": "价值3888元(1名)"},      
                        { "level": "二等奖", "name": "翰林坊·大坛酒 1500ml×1", "description": "价值898元(5名)"},      
                        { "level": "三等奖", "name": "翰林坊·贡酒 666ml×1", "description": "价值288元(10名)"},      
                        { "level": "优秀奖", "name": "小角楼·绿水青山醒得快 333ml×2", "description": "价值96元(30名)"},      
                    ],
                    
                    rank_data: [
                        {"rank" : 1 , "nickname": "test", "count": 100},
                        {"rank" : 2 , "nickname": "test", "count": 90},
                        {"rank" : 3 , "nickname": "test", "count": 80},
                        {"rank" : 4 , "nickname": "test", "count": 70},
                        {"rank" : 5 , "nickname": "test", "count": 60},
                        {"rank" : 6 , "nickname": "test", "count": 50},
                        {"rank" : 7 , "nickname": "test", "count": 40},
                        {"rank" : 8 , "nickname": "test", "count": 30},
                        {"rank" : 9 , "nickname": "test", "count": 20},
                        {"rank" : 10 , "nickname": "test", "count": 10},
                    ]
                }
            },
            methods: {
                formatNavImgUrl(index) {
                    const images = [
                        "./assets/icon/vote.png",
                        "./assets/icon/enroll.png",
                        "./assets/icon/rule.png",
                        "./assets/icon/rank.png"
                    ]
                    const images_active = [
                        "./assets/icon/vote-red.png",
                        "./assets/icon/enroll-red.png",
                        "./assets/icon/rule-red.png",
                        "./assets/icon/rank-red.png"
                    ]
                    if (this.page === index) {
                        return images_active[index];
                    } else {
                        return images[index];
                    }
                },
                formatNavTextStyle(index) {
                    if (this.page === index) {
                        return 'color:#b64c48;';
                    }
                },
                switchPage(e) {
                    var index = e.target.dataset.index;
                    this.page = +index;
                }
            }
        });

    </script>
</body>
</html>
