Skip to content

X
xiaojiaolou
提交 7e8606b7 authored 作者: Cptcpn's avatar Cptcpn
浏览文件
操作

init

上级
隐藏空白字符变更
内嵌 并排
正在显示 包含 513 行增加 和 0 行删除
assets/css/main.css 0 → 100644
浏览文件 @ 7e8606b7
body {
}
.nav-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
background: #ffffff;
display: grid;
grid-template-columns: repeat(4, 1fr);
place-items: center;
}
.nav-bar > div {
display: flex;
justify-content: center;
align-items:center;
flex-direction: column;
font-size: 0.6rem;
color: #666;
padding: 0.3rem 0;
}
.nav-bar .item {
height: 25px;
text-align: center;
}
.nav-bar .item + div {
transform: scale(0.8);
margin-top: 0.15rem;
}
.enroll-page {
background: #e7935b;
width: 100vw;
height: 100vh;
}
.rule-page {
background: #e7935b;
width: 100vw;
height: 100vh;
}
.rank-page {
background: #e7935b;
width: 100vw;
height: 100vh;
}
.item-active {
color: red;
}
.enroll-item {
padding: 0.5rem 0;
}
.enroll-input {
border-radius: 7px;
border: 1px solid #b64c48;
padding: 0.5rem;
width: 100%;
background: transparent;
}
.enroll-item-title {
color: #b02a1e;
font-weight: bold;
padding: 0.3rem 0;
}
.rule-item {
background: #ffffff;
border-radius: 7px;
padding: 0.5rem;
margin: 0.5rem 0;
}
.rule-item img {
width: 70px;
}
.rule-item p {
margin: 0.2rem 0;
}
.vote-page {
width: 100vw;
}
html {
background: #fff6e8;
}
.history-info {
background: #ffe2a3;
border-radius: 7px;
margin: 0.5rem 0;
}
.history-info-title {
color: #b02a1e;
font-size: 0.9rem;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
margin: 0.3rem 0;
}
.history-info-title img {
padding: 0.2rem 0;
}
.search-input {
flex-grow: 1;
background:#f5f5f5;
border:none;
outline:none;
padding:0.5rem;
}
.search-btn {
background: rgb(160, 20, 20);
color: #fff;
font-size: 1.1rem;
padding: 0.5rem 1rem;
border-radius: 7px;
}
\ No newline at end of file
assets/css/minireset.css 0 → 100644
浏览文件 @ 7e8606b7
/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,
input,
select,
textarea {
margin: 0;
}
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
img,
embed,
object,
audio,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
text-align: left;
}
assets/js/vue.js 0 → 100644
浏览文件 @ 7e8606b7
This source diff could not be displayed because it is too large. You can view the blob instead.
default.aspx 0 → 100644
浏览文件 @ 7e8606b7
<!-- <%@ 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>
default.aspx.cs 0 → 100644
浏览文件 @ 7e8606b7
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace swmrecognizeproject.page.xiaojiaolou
{
public partial class _default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
\ No newline at end of file
default.aspx.designer.cs 0 → 100644
浏览文件 @ 7e8606b7
//------------------------------------------------------------------------------
// <自动生成>
// 此代码由工具生成。
//
// 对此文件的更改可能导致不正确的行为，如果
// 重新生成代码，则所做更改将丢失。
// </自动生成>
//------------------------------------------------------------------------------
namespace swmrecognizeproject.page.xiaojiaolou
{
public partial class _default
{
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论