|
|
@@ -0,0 +1,112 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <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;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main_box {
|
|
|
+ font-size: 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main_box img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg_wrap {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: url(/static/img/bg_wrap.png) no-repeat left top / cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rel_wrap {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .abs_wrap {
|
|
|
+ position: absolute;
|
|
|
+ top: 42%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 88%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_name {
|
|
|
+ font-size: 0.18rem;
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 18%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user_list {
|
|
|
+ font-size: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user_list img {
|
|
|
+ width: 0.65rem;
|
|
|
+ height: 0.65rem;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .d_none {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+<main class="main_box">
|
|
|
+ <div class="bg_wrap">
|
|
|
+ <div class="rel_wrap">
|
|
|
+ <img src="/static/img/bg.png" alt="" />
|
|
|
+ <div class="abs_wrap">
|
|
|
+ <p class="book_name">《清明时节雨纷纷》</p>
|
|
|
+ <div class="user_list">
|
|
|
+ <img src="/static/img/defalut.png" alt="" />
|
|
|
+ <img src="/static/img/defalut.png" alt="" />
|
|
|
+ <img src="/static/img/defalut.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</main>
|
|
|
+</body>
|
|
|
+<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
|
|
|
+<script>
|
|
|
+ var config = {{$js_config}}
|
|
|
+ wx.ready(function () { //需在用户可能点击分享按钮前就先调用
|
|
|
+
|
|
|
+ wx.updateAppMessageShareData(
|
|
|
+ config
|
|
|
+ )
|
|
|
+ wx.updateTimelineShareData(
|
|
|
+ config
|
|
|
+ )
|
|
|
+ });
|
|
|
+
|
|
|
+</script>
|
|
|
+</html>
|
tusx
