提交

src/app.config.ts

@@ -2,7 +2,8 @@ export default defineAppConfig({
   pages: [
     'pages/index/index',
     'pages/examine/index',
-    'pages/application_list/index'
+    'pages/application_list/index',
+    'pages/webview/index',
   ],
   window: {
     backgroundTextStyle: "light",

src/pages/home/index.tsx

@@ -87,6 +87,7 @@ class Home extends React.Component<any, any> {
                 style={`width: ${this.#w}px;height: ${this.#h}px;`}
                 autoplay={true}
                 loop
+                muted
                 show-fullscreen-btn={true}
                 show-play-btn={true}
                 id="video"

src/pages/previous_editions/index.css

@@ -1,17 +1,30 @@
+@charset "UTF-8";
 .PreviousEditions {
   width: 100%;
   box-sizing: border-box;
 }
 
-.PreviousEditions .video {
+.PreviousEditions .zuopin {
+  width: 650px;
+  height: 300px;
+  background-color: #000;
   display: block;
   position: relative;
   margin: 0 auto 62px auto;
-  width: 82%;
-  height: 20%;
 }
 
 .PreviousEditions .line {
   display: block;
   margin: 0 auto;
 }
+
+.PreviousEditions .article {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  /* 显示两行文本 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* 超出部分显示省略号 */
+  padding: 0 1em;
+}

src/pages/previous_editions/index.min.css

@@ -1 +1 @@
-.PreviousEditions{width:100%;box-sizing:border-box}.PreviousEditions .video{display:block;position:relative;margin:0 auto 62px auto;width:82%;height:20%}.PreviousEditions .line{display:block;margin:0 auto}
+.PreviousEditions{width:100%;box-sizing:border-box}.PreviousEditions .zuopin{width:650px;height:300px;background-color:#000;display:block;position:relative;margin:0 auto 62px auto}.PreviousEditions .line{display:block;margin:0 auto}.PreviousEditions .article{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;padding:0 1em}

src/pages/previous_editions/index.scss

@@ -17,4 +17,13 @@
     display: block;
     margin: 0 auto;
   }
+
+  .article {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* 显示两行文本 */
+    overflow: hidden;
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+    padding: 0 1em;
+  }
 }

src/pages/previous_editions/index.tsx

@@ -17,9 +17,15 @@ class PreviousEditions extends React.Component<any, any> {
       heightLine: 0,
       list: [
         {
-          url: "https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/R-C.jfif"
-        }
-      ]
+          url: "https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/R-C.jfif",
+          type: "Image",
+        },
+        {
+          type: "Article",
+          title: "公众号文章",
+          url: "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MTg4NjU5NA==&action=getalbum&album_id=2833231067116797954#wechat_redirect",
+        },
+      ],
     };
   }
 
@@ -41,7 +47,32 @@ class PreviousEditions extends React.Component<any, any> {
     Taro.previewImage({
       urls: [url],
     });
-  }
+  };
+
+  ele_image = (v: any) => {
+    return (
+      <Image
+        src={v.url}
+        className="zuopin"
+        mode="aspectFit"
+        onClick={() => this.showImage(v.url)}
+      />
+    );
+  };
+
+  showWebview = (url: string) => {
+    Taro.navigateTo({
+      url: "/pages/webview/index?url=" + url,
+    });
+  };
+
+  ele_article = (v: any) => {
+    return (
+      <View className="article" onClick={() => this.showWebview(v.url)}>
+        {v.title}
+      </View>
+    );
+  };
 
   render() {
     // const {  } = this.props;
@@ -49,27 +80,26 @@ class PreviousEditions extends React.Component<any, any> {
     return (
       <View className="PreviousEditions">
         <Image
-          style={`width: ${this.#systemInfo.screenWidth}px;height: ${this.state.height
-            }px;`}
+          style={`width: ${this.#systemInfo.screenWidth}px;height: ${
+            this.state.height
+          }px;`}
           src="https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/banner-2.png"
           onLoad={this.getImageSize}
         />
         <InputBox>
-          {this.state.list.map(v => {
-            return (<View>
-              <Image
-                src={v.url}
-                className="zuopin"
-                mode="aspectFit"
-                onClick={() => this.showImage(v.url)}
-              />
-              <Image
-                src={line}
-                onLoad={this.getImageSizeLine}
-                className="line"
-                style={`width: ${w}px;height: ${this.state.heightLine}px;`}
-              />
-            </View>)
+          {this.state.list.map((v) => {
+            return (
+              <View>
+                {v.type === "Image" && this.ele_image(v)}
+                {v.type === "Article" && this.ele_article(v)}
+                <Image
+                  src={line}
+                  onLoad={this.getImageSizeLine}
+                  className="line"
+                  style={`width: ${w}px;height: ${this.state.heightLine}px;`}
+                />
+              </View>
+            );
           })}
         </InputBox>
       </View>

src/pages/webview/index.config.ts

@@ -0,0 +1,7 @@
+export default definePageConfig({
+  navigationBarBackgroundColor: "#E5CBAA",
+  navigationBarTitleText: "",
+  navigationBarTextStyle: "white",
+  usingComponents: {},
+  navigationStyle: "custom"
+});

src/pages/webview/index.scss

@@ -0,0 +1 @@
+@import "..\\..\\app-let.scss";

src/pages/webview/index.tsx

@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+import { WebView } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+
+import "./index.scss";
+
+export default class Examine extends Component<any, any> {
+  static defaultProps = {
+    url: "",
+  };
+//   #pageCtx = Taro.getCurrentInstance().page;
+
+  constructor(props: any) {
+    super(props);
+    console.log(this.props.tid.replace(/pages\/webview\/index\?/, ""))
+    this.state = {
+        url: this.props.tid.replace(/pages\/webview\/index\?url=/, ""),
+    }
+  }
+
+  backPage = () => {
+    Taro.navigateBack();
+  };
+
+  render() {
+    return <WebView src={this.state.url} />;
+  }
+}