文章

app.json

@@ -3,7 +3,7 @@
     "pages/index/index",
     "pages/upload/upload",
     "pages/user/user",
-    
+    "pages/intro/intro",
     "pages/gameDetail/gameDetail",
     "pages/game/game",
     "pages/day/day",

pages/index/index.wxml

@@ -1,4 +1,11 @@
 <!--index.wxml-->
+  <view wx:if="{{datas.notices.length>0}}" class="marquee_container" style="--marqueeWidth--:-12em">
+    <view class="zd"></view>
+    <image src="../images/tttz.png" mode="widthFix"></image>
+      <view class="marquee_text">
+        <navigator url="../intro/intro?id={{item.id}}" wx:for="{{datas.notices}}">{{item.name}}</navigator>
+      </view>
+  </view>
 <view class="part" wx:if='{{datas.match_name}}' style="margin-bottom:0;">
   <view class="title">
     {{datas.match_name}}    

pages/index/index.wxss

@@ -102,4 +102,59 @@ ec-canvas {
 .list text{
   display: block;
   color: #999;
+}
+
+/*首页跑马灯效果*/
+@keyframes around {
+  from {
+   margin-left: 90%;
+  }
+  to {
+   /* var接受传入的变量 */
+   margin-left: var(--marqueeWidth--);
+  }
+ }
+ .zd{
+   width: 80px;
+   height: 100%;
+   position: absolute;
+   left: 0;
+   top: 0;
+   background: #fff;
+
+ }
+ 
+.marquee_container{
+  width: 100%;
+  background: #fff;
+  margin-top: 12px;
+  box-shadow:0px 4px 12px 0px rgba(0,0,0,0.08);
+  border-radius:4px;
+  padding: 10px 12px;
+  position: relative;
+  overflow: hidden;
+}
+.marquee_container:hover{
+  /* 不起作用 */
+  animation-play-state: paused;
+}
+.marquee_text{
+  color:#333;
+  font-size: 28rpx;
+  display: inline-block;
+  white-space: nowrap;
+  animation-name: around;
+  animation-duration: 10s;  /*过渡时间*/
+  animation-iteration-count: infinite;
+  animation-timing-function:linear;
+}
+.marquee_text navigator{
+  margin-right: 200px;
+}
+.marquee_container image{
+  width: 53px;
+  max-height: 30px;
+  position: absolute;
+  left: 10px;
+  top: 15px;
 }

pages/intro/intro.js

@@ -0,0 +1,129 @@
+// pages/intro/intro.js
+const app = getApp()
+const host = app.globalData.host;
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    datas:{
+      imgs:[]
+    },
+    type:1
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    wx.getStorage({
+      key: 'userInfo',
+      success: res => {
+        if (res.data) {
+          this.setData({
+            userInfo: res.data
+          })
+          wx.request({
+            url: host + '/api/wx/article?id=' + options.id,
+            method: 'GET',
+            header: {
+              'Authorization': this.data.userInfo.token
+            },
+            success: res => {
+              wx.setNavigationBarTitle({
+                title: res.data.data.name,
+              })
+              this.setData({
+                data: res.data.data
+              })
+              this.init()
+            }
+          })
+        } else {
+          wx.switchTab({
+            url: '../user/user',
+          })
+        }
+      },
+      fail: error => {
+        wx.switchTab({
+          url: '../user/user',
+        })
+      }
+    })
+    
+  },
+  init:function(){
+    const query = wx.createSelectorQuery()
+    const that=this
+    query.select('#editor').context(function (res) {
+      res.context.setContents({
+         html: that.data.data.content
+        })
+      })
+      .exec()
+  },
+  openMap:function(){
+    var lon = parseFloat(this.data.data.point.split(',')[0]),
+      lat = parseFloat(this.data.data.point.split(',')[1]);
+    wx.openLocation({//​使用微信内置地图查看位置。
+      latitude: lat,//要去的纬度-地址
+      longitude: lon,
+      'name': '巴中逸沣安全培训'
+    })
+  },
+  phone:function(){
+    wx.makePhoneCall({
+      phoneNumber: this.data.data.phone //仅为示例，并非真实的电话号码
+    })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/intro/intro.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/intro/intro.wxml

@@ -0,0 +1,5 @@
+
+    <view class="title">{{data.name}}</view>
+    
+    <editor style="height:100vh;margin-top:10px;padding:0 10px;" read-only="{{true}}" id="editor"  class="ql-container">
+    </editor>

pages/intro/intro.wxss

@@ -0,0 +1,27 @@
+/* pages/intro/intro.wxss */
+.content{
+  padding: 12px;
+}
+.title{
+  font-size: 36rpx;
+  text-align: center;
+  margin-bottom: 12px;
+}
+.swiper-item{
+  width: 100%;
+}
+.swiper-item image{
+  width: 100%;
+}
+
+.link view{
+  font-size: 34rpx;
+  padding: 15px 0;
+  font-weight: bold;
+  border-bottom: 1px solid #F2F3F4;
+
+}
+.link image{
+  float: right;
+  width: 40rpx;
+}