|
|
@@ -0,0 +1,225 @@
|
|
|
+<!--
|
|
|
+/**
|
|
|
+ * Created by PhpStorm.
|
|
|
+ * User: z-yang
|
|
|
+ * Date: 2019/4/11
|
|
|
+ * Time: 15:33
|
|
|
+ */
|
|
|
+
|
|
|
+-->
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
|
|
|
+ <meta
|
|
|
+ name="viewport"
|
|
|
+ content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
|
+ />
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
|
+ <title>微信阅读小管家福利</title>
|
|
|
+ <style>
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0;
|
|
|
+ max-width: 450px;
|
|
|
+ font-size: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ html {
|
|
|
+ background: #ff3628;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 0.17rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container .wrap {
|
|
|
+ font-size: 0;
|
|
|
+ width: 95%;
|
|
|
+ margin: 2rem auto 0;
|
|
|
+ background: -webkit-gradient(
|
|
|
+ linear,
|
|
|
+ left bottom,
|
|
|
+ left top,
|
|
|
+ from(white),
|
|
|
+ to(#fffbe8)
|
|
|
+ );
|
|
|
+ background: linear-gradient(0deg, white, #fffbe8);
|
|
|
+ -webkit-box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
|
|
|
+ box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrap .text-container {
|
|
|
+ font-size: 0.18rem;
|
|
|
+ padding: 0.2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container .wrap img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-wrap {
|
|
|
+ margin-top: 0.2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-wrap .to_get {
|
|
|
+ display: block;
|
|
|
+ background: #ffdb5f;
|
|
|
+ color: #8a4b18;
|
|
|
+ font-size: 0.17rem;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 85%;
|
|
|
+ margin: 0 auto 0.15rem;
|
|
|
+ padding: 0.15rem 0;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-wrap .get-coin {
|
|
|
+ background: #fffbe8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container .wrap .get_notice {
|
|
|
+ font-size: 0.12rem;
|
|
|
+ color: #666;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container .wrap .help_wrap {
|
|
|
+ background: white;
|
|
|
+ border: 1px solid #d6cea5;
|
|
|
+ border-radius: 2px;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0.54rem auto 0;
|
|
|
+ padding: 0.16rem 0 0.44rem;
|
|
|
+ font-size: 0.13rem;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container .wrap .help_wrap p {
|
|
|
+ padding: 0 0.18rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container .wrap .help_wrap .title {
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 0.15rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container .wrap .help_wrap .item {
|
|
|
+ line-height: 1.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container .wrap .help_wrap .item i {
|
|
|
+ color: #ff4930;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alert {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .alert .content {
|
|
|
+ width: 80%;
|
|
|
+ height: 2rem;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 0.11rem;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ margin-left: -40%;
|
|
|
+ margin-top: -40%;
|
|
|
+ text-align: center;
|
|
|
+ background: #f7f7f7;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content .title {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 0.16rem;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1px solid #f7f7f7;
|
|
|
+ background: #ff4930;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content .title img {
|
|
|
+ width: 0.32rem;
|
|
|
+ height: 0.32rem;
|
|
|
+ position: absolute;
|
|
|
+ right: 4%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .content .content-text {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-text p {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content .notice1 {
|
|
|
+ font-size: 0.18rem;
|
|
|
+ margin-bottom: 0.2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content .notice2 {
|
|
|
+ font-size: 0.16rem;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .show {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .hide {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ /*# sourceMappingURL=main.css.map */
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+<main class="container">
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="text-container">
|
|
|
+ {{ $info }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="button-wrap">
|
|
|
+ <a class="to_get get-coin" href="/recent">去看书吧</a>
|
|
|
+ </div>
|
|
|
+</main>
|
|
|
+</body>
|
|
|
+</html>
|
