list

app.json

@@ -1,22 +1,24 @@
 {
-  "pages": [
+    "pages": [
-    "pages/index/index"
+        "pages/index/index",
-  ],
+        "pages/list/list",
-  "window": {
+        "pages/222"
-    "navigationBarTextStyle": "black",
+    ],
-    "navigationStyle": "custom"
+    "window": {
-  },
+        "navigationBarTextStyle": "black",
-  "style": "v2",
+        "navigationStyle": "custom"
-  "renderer": "skyline",
+    },
-  "rendererOptions": {
+    "style": "v2",
-    "skyline": {
+    "renderer": "skyline",
-      "defaultDisplayBlock": true,
+    "rendererOptions": {
-      "disableABTest": true,
+        "skyline": {
-      "sdkVersionBegin": "3.0.0",
+            "defaultDisplayBlock": true,
-      "sdkVersionEnd": "15.255.255"
+            "disableABTest": true,
-    }
+            "sdkVersionBegin": "3.0.0",
-  },
+            "sdkVersionEnd": "15.255.255"
-  "componentFramework": "glass-easel",
+        }
-  "sitemapLocation": "sitemap.json",
+    },
-  "lazyCodeLoading": "requiredComponents"
+    "componentFramework": "glass-easel",
+    "sitemapLocation": "sitemap.json",
+    "lazyCodeLoading": "requiredComponents"
 }

components/list-nav-bar/list-nav-bar.js

@@ -0,0 +1,52 @@
+const app = getApp()
+Component({
+
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        showNavBtn: {
+            type: Boolean,
+            value: true
+        },
+        title: {
+            type: String,
+            value: '标题'
+        },
+        color: {
+            type: String,
+            value: '#fff'
+        },
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        navBarHeight: app.globalData.navBarHeight,
+        menuRight: app.globalData.menuRight,
+        menuTop: app.globalData.menuTop,
+        menuHeight: app.globalData.menuHeight,
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        // 回退
+        navBack() {
+          wx.navigateBack()
+          this.triggerEvent('onBack')
+        },
+        // 回主页
+        // navHome() {
+        //   wx.switchTab({
+        //     url: '/src/pages/home/home'
+        //   })
+        //   this.triggerEvent('onHome')
+        // },
+        // navIcon() {
+        //   this.triggerEvent('onIcon')
+        // }
+      },
+})

components/list-nav-bar/list-nav-bar.json

@@ -0,0 +1,5 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {}
+  }

components/list-nav-bar/list-nav-bar.wxml

@@ -0,0 +1,28 @@
+<view class="navbar" style="height:{{navBarHeight}}px; background:#3c8bf6;" >
+  <view class="navbar-container">
+    <!-- 导航按钮 -->
+    <view wx:if="{{showNavBtn}}" style="z-index: 999999;">
+      <!-- 默认显示返回，若添加isShowHome属性则显示主页，添加isShowCustomIcon则显示用户自定义icon -->
+      <!-- <view class="navbar-btn" wx:if="{{navIcon}}" bindtap="navBtn">
+        <image class="navbar-icon custom-icon-class" src="{{navIcon}}"></image>
+      </view> -->
+      <!-- <view class="navbar-btn" wx:elif="{{navHome}}" bindtap="navHome">
+        <image class="navbar-icon custom-icon-class" src="./images/home.svg"></image>
+      </view> -->
+      <view class="navbar-btn" bind:tap="navBack">
+        <image class="navbar-icon custom-icon-class" src="../../images/back.png"></image>
+      </view>
+    </view>
+    <!-- 中间标题 -->
+    <view class="navbar_title" style="color: {{color}};" >
+      <text>{{title}}</text>
+      <!-- 具名插槽 position: relative;left: -80rpx;-->
+      <!-- <view style="display: inline-block;">
+        <slot name="titleSlot"></slot>
+      </view> -->
+    </view>
+  </view>
+</view>
+
+<!-- 占位，高度与顶部栏一样 -->
+<view style="height:{{navBarHeight}}px;"></view>

components/list-nav-bar/list-nav-bar.wxss

@@ -0,0 +1,65 @@
+.navbar {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    color: #fff;
+    background: #3c8bf6;
+    display: flex;
+    flex-flow:column;
+    justify-content: flex-end; 
+  }
+  
+  .navbar-container {
+    
+    height: 100rpx;
+    position: relative;
+    /* display: flex;
+    flex-flow:row;
+    align-items: center;
+    justify-content: center; */
+    /* position: relative; */
+     /*  width: 100vw;
+    height: 64rpx;
+    z-index: 100;
+    display: flex;
+    box-sizing: border-box; */
+  }
+  
+  .navbar-btn {
+    display: flex;
+    flex-flow:row;
+    align-items: center;
+    justify-content: center;
+    margin-left: 20px;
+    width: 60rpx;
+    height: 100rpx; 
+    /* position: absolute; */
+    /* left: 24rpx;
+    width: 64rpx;
+    height: 64rpx; */
+    /* 
+   
+  
+    z-index: 100;
+    display: flex;
+    align-items: center; */
+  }
+  
+  .navbar-icon {
+    width: 36rpx;
+    height: 36rpx;
+  }
+  
+  .navbar_title {
+    position: absolute;
+    width: 100%;
+    height: 100rpx;
+    line-height: 100rpx;
+    font-weight: 700;
+    text-align: center;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  

images/back.svg

@@ -0,0 +1 @@
+<svg t="1683771140238" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6368" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M711.841477 976.738462l88.300308-86.171569L404.393354 513.969231 800.141785 137.371569 711.841477 51.2 227.796677 513.969231 711.841477 976.738462z" fill="#000000" p-id="6369"></path></svg>

images/home.svg

@@ -0,0 +1 @@
+<svg t="1683771053333" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4882" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M762.3 565.3c0-19 15.7-34.1 34.7-34.1 19 0 34.2 15.1 34.2 34.1v336.3c0 19-15.2 34.4-34.2 34.4H229.6c-19.1 0-34.7-15.4-34.7-34.4V565.3c0-19 15.7-34.1 34.7-34.1 18.6 0 34.2 15.1 34.2 34.1v301.9h498.5V565.3z m-638.2 9.3l388.8-387.8 389.3 387.8c13.2 13.2 35.2 13.2 48.4 0 13.4-13.2 13.4-35.1 0-48.3L538 114.1l-0.7-0.5c-13.4-13.2-35.2-13.2-48.6 0l-413 412.6c-13.6 13.2-13.6 35.1 0 48.3 13.2 13.2 35.2 13.2 48.4 0.1z" fill="#000000" p-id="4883"></path></svg>

pages/222.js

@@ -0,0 +1,66 @@
+// pages/222.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/222.json

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

pages/222.wxml

@@ -0,0 +1,2 @@
+<!--pages/222.wxml-->
+<text>pages/222.wxml</text>

pages/222.wxss

@@ -0,0 +1 @@
+/* pages/222.wxss */

pages/index/index.js

@@ -3,15 +3,45 @@ Page({
 
     data: {
         codes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
-        faq: [
+        faq: [{
-          { title: '超出焊接时间', date: '08.04 00:48' },
+                title: '超出焊接时间',
-          { title: '时间超长', date: '08.04 00:48' },
+                date: '08.04 00:48'
-          { title: '常见问题常见问题', date: '08.04 00:48' }
+            },
+            {
+                title: '时间超长',
+                date: '08.04 00:48'
+            },
+            {
+                title: '常见问题常见问题',
+                date: '08.04 00:48'
+            }
         ],
-        knowledge: [
+        knowledge: [{
-          { title: '超出焊接时间', date: '08.04 00:48' },
+                title: '超出焊接时间',
-          { title: '时间超长', date: '08.04 00:48' },
+                date: '08.04 00:48'
-          { title: '常见问题常见问题', date: '08.04 00:48' }
+            },
+            {
+                title: '时间超长',
+                date: '08.04 00:48'
+            },
+            {
+                title: '常见问题常见问题',
+                date: '08.04 00:48'
+            }
         ]
-      },
+    },
-})
+
+    jumpPage(e) {
+        
+        let jumpType = e.currentTarget.dataset.jumptype;
+        console.log(jumpType == 1);
+        if(jumpType == 1){
+            wx.navigateTo({
+                url: "/pages/list/list?id=1"
+              })
+        }
+        // wx.navigateTo({
+        //     url: this.data.category[index].url
+        // })
+    },
+})

pages/index/index.wxml

@@ -17,7 +17,7 @@
                 <view class="section-title">故障码快速查询</view>
                 <view class="code-grid">
                     <block wx:for="{{codes}}" wx:key="index">
-                        <view class="code-button">{{item}}</view>
+                        <view class="code-button" bind:tap="jumpPage" data-jumpType="2">{{item}}</view>
                     </block>
                 </view>
                 <view class="pagination">
@@ -36,23 +36,23 @@
                 <view class="group-item-header">
                     <view class="group-item-header-tip"></view>
                     <view class="group-item-header-title">常见问题解决</view>
-                    <view class="group-item-header-tip">
+                    <view class="group-item-header-tip" bind:tap="jumpPage" data-jumpType="1">
                         <view class="group-item-header-tip-txt">全部</view>
                         <image class="group-item-header-tip-image" src="../../images/jt.png"></image>
                     </view>
                 </view>
-                <view class="group-txt-item">
+                <view class="group-txt-item" bind:tap="jumpPage" data-jumpType="2">
-                    <text class="group-txt-item-bullet">•</text>
+                    <view class="group-txt-item-bullet"></view>
                     <text class="group-txt-item-text">超出焊接时间</text>
                     <text class="group-txt-item-text-time">08.04 00:48</text>
                 </view>
-                <view class="group-txt-item">
+                <view class="group-txt-item" bind:tap="jumpPage" data-jumpType="2">
-                    <text class="group-txt-item-bullet">•</text>
+                    <view class="group-txt-item-bullet"></view>
                     <text class="group-txt-item-text">超出焊接时间</text>
                     <text class="group-txt-item-text-time">08.04 00:48</text>
                 </view>
-                <view class="group-txt-item">
+                <view class="group-txt-item" bind:tap="jumpPage" data-jumpType="2">
-                    <text class="group-txt-item-bullet">•</text>
+                    <view class="group-txt-item-bullet"></view>
                     <text class="group-txt-item-text">超出焊接时间</text>
                     <text class="group-txt-item-text-time">08.04 00:48</text>
                 </view>
@@ -64,23 +64,23 @@
                 <view class="group-item-header">
                     <view class="group-item-header-tip"></view>
                     <view class="group-item-header-title">超声波知识</view>
-                    <view class="group-item-header-tip">
+                    <view class="group-item-header-tip" bind:tap="jumpPage" data-jumpType="1">
                         <view class="group-item-header-tip-txt">全部</view>
                         <image class="group-item-header-tip-image" src="../../images/jt.png"></image>
                     </view>
                 </view>
-                <view class="group-txt-item">
+                <view class="group-txt-item" bind:tap="jumpPage" data-jumpType="2">
-                    <text class="group-txt-item-bullet">•</text>
+                    <view class="group-txt-item-bullet"></view>
                     <text class="group-txt-item-text">超出焊接时间</text>
                     <text class="group-txt-item-text-time">08.04 00:48</text>
                 </view>
-                <view class="group-txt-item">
+                <view class="group-txt-item" bind:tap="jumpPage" data-jumpType="2">
-                    <text class="group-txt-item-bullet">•</text>
+                    <view class="group-txt-item-bullet"></view>
                     <text class="group-txt-item-text">超出焊接时间</text>
                     <text class="group-txt-item-text-time">08.04 00:48</text>
                 </view>
-                <view class="group-txt-item">
+                <view class="group-txt-item" bind:tap="jumpPage" data-jumpType="2">
-                    <text class="group-txt-item-bullet">•</text>
+                    <view class="group-txt-item-bullet"></view>
                     <text class="group-txt-item-text">超出焊接时间</text>
                     <text class="group-txt-item-text-time">08.04 00:48</text>
                 </view>
@@ -93,23 +93,23 @@
                 <view class="group-item-header">
                     <view class="group-item-header-tip"></view>
                     <view class="group-item-header-title">技术支持</view>
-                    <view class="group-item-header-tip">
+                    <view class="group-item-header-tip" bind:tap="jumpPage" data-jumpType="1">
                         <view class="group-item-header-tip-txt">全部</view>
                         <image class="group-item-header-tip-image" src="../../images/jt.png"></image>
                     </view>
                 </view>
-                <view class="group-txt-item">
+                <view class="group-txt-item" bind:tap="jumpPage" data-jumpType="2">
-                    <text class="group-txt-item-bullet">•</text>
+                    <view class="group-txt-item-bullet"></view>
                     <text class="group-txt-item-text">超出焊接时间</text>
                     <text class="group-txt-item-text-time">08.04 00:48</text>
                 </view>
-                <view class="group-txt-item">
+                <view class="group-txt-item" bind:tap="jumpPage" data-jumpType="2">
-                    <text class="group-txt-item-bullet">•</text>
+                    <view class="group-txt-item-bullet"></view>
                     <text class="group-txt-item-text">超出焊接时间</text>
                     <text class="group-txt-item-text-time">08.04 00:48</text>
                 </view>
-                <view class="group-txt-item">
+                <view class="group-txt-item" bind:tap="jumpPage" data-jumpType="2">
-                    <text class="group-txt-item-bullet">•</text>
+                    <view class="group-txt-item-bullet"></view>
                     <text class="group-txt-item-text">超出焊接时间</text>
                     <text class="group-txt-item-text-time">08.04 00:48</text>
                 </view>

pages/index/index.wxss

@@ -176,7 +176,7 @@ page {
 }
 
 .group-item-header {
-    height: 100rpx;
+    height: 110rpx;
     /* background: chartreuse; */
     display: flex;
     justify-content: space-between;
@@ -187,12 +187,25 @@ page {
 }
 
 .group-item-header-title {
-    flex: 1;
+    /* flex: 1; */
+
+    width: 255rpx;
+    justify-content: center;
+    align-items: center;
+    /* padding-left: 25rpx;
+    padding-right: 25rpx;
+    padding-top: 5rpx; */
+    padding:5rpx 25rpx 0 25rpx;
     font-family: YouSheBiaoTiHei-1;
     text-align: center;
     font-size: 36rpx;
     color: #3c8af6;
-   
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPUAAAA3CAYAAADUkQzaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE6klEQVR4nO3dzW8VVRzG8e8tgkrEDWnsRmtdQMGgK0JAdGGIgi9bTXDbgBEksjL+Be40vjRY4svORbdqwEBYKEpYsDC02rKA1m4qxI1V0Dbluvidhi7umZd7Z+6559znkzSEO3Pm/ELzMHNnzpzTaDabiEg6BkIXICLVUqhFEnOfb8O1xZVu1uG3NXQB0nV/hi6gMiPAi8B+YAcwDGxx25aAeeA34CLwPXCjzMG3DW1s+XnD951aoZZg4g71BuA14DiwF2gUbNcELgGfApPAal4DX6h1+S1SnQPAFPA1sI/igcbtu8+1nXLHaotCLdK5B4AJ4BwwWsHxRt2xJtyxS1GoRTozCPwAHKnh2EfcsQfLNFKoRdo3CPwI7K6xj92uj8LBVqjTsRP4ALub+q/7+dV9tjNgXanaDHwDbO9CX9tdX5uL7KxQx28Tdsf0KnAS+z52v/vZ4T67CnwGPBioxhR9BOzpYn97XJ+5FOq4bQK+A46R/bscAI4C37o20pkDwFiAfscocFdcoY7bh5R79PE8djku7RsAPg7Y/yfYs3AvhTpeT2Jn37LedG2lPa9jX2tCGcUGt3gp1PEaI+d/bI8NhLl0TMWx0AVgo9W8FOp4HQzUtl69PUR0BBv1Fdpe4AnfRoU6Xt5fas1t+9lByg39rEsDe1GkJYW6Py2HLiBSz4QuYB1vLQp1vK530Ha+sir6Sy/dYPQOKFKo43W2g7bnK6uivzwauoB1hn0bFOp4fUGBd25bWAU+r7iWfrElf5eueci3QaGO1xT2al5ZE66tJEqhjttJyl1KX3BtpD1LoQtY52/fBoU6bsvAy8A4cDdjv7vYGfoVdOe7EwuhC1jnd98GhTp+y9gIo6ewt3hmgRXgH2DaffY0Njz0TqAai+ntgSdgr7L2imnfBu9sohKdaeCd0EUk7iJwOHQRzk++DTpTS2/o/bM02DS+vbCkTROrpSWFWqS468DPoYvAphL2Dj5SqEXKGQ9dADbTjZdCLeHFcem9ZhKYCdj/jKvBS6EWKWcVeDtg/yfIGUmoUIuUdx74KkC/X2KT/GdSqEXacxy43MX+LlPwCkGhFmnPbeBVbLBP3WZdX7eL7KxQi7TvFvAccKXGPq64Pm4VbaBQi3TmJvAscLqGY5/G1ra+WaZRmVBrWReR1u5g0zW/QDWX47PuWEexnJVSJNSpLesyDJzCpvT5z/15ioyZJEQKOodNeXQYG/VVdkjpJeANd4zcu9w+jWazdb/XFlfg3rIuRVeBuAAcosrX+7ZWdiSw2SAnaT2DxRI2SXon0wRJO+IafFLGCJaH/djJ8DHgYbftL+z1yRnsRZEzwI0yB982tLHl53mhHgfeKtORa5M52Xgp1YX6ceAX7v2jtrKEvcI4V1mvki/dUNfKF+qsy+/UlnV5j+xAg53B3+1CLSK1yQp1asu6HCq430u1ViFSs6xQp7asyyMF9xuqtQqRmmWFOrVlXf4ouN9irVWI1KyuwSe9OLndmYL76e63RC0r1Kkt6/I++VO8Lrn9RKKVFerUlnWZw55D+4K99px6rkv1iNQiK9S9saxLtc8wzwK7sDmwF7CvCQvu77vQpbckIGuK4LVlXcoOPun1ZV3msWfpIknKu1GmZV1EIpMXai3rIhKZIo+00lnWRaQPeF/oEJE4aeYTkcQo1CKJ+R8nM+7CXs93fAAAAABJRU5ErkJggg==);
+    background-size: cover;
+    /* background-position: center; */
+    background-position: 0 0;
+    background-repeat: no-repeat;
+
 
 }
 
@@ -242,11 +255,17 @@ page {
 /*最后一个元素不带虚线*/
 
 .group-txt-item-bullet {
-    color: #318bf7;
+    /* color: #318bf7;
     margin-right: 10rpx;
     font-size: 40rpx;
     font-weight: bold;
-    line-height: 85rpx;
+    line-height: 85rpx; */
+
+    width: 12rpx;
+    height: 12rpx;
+    background-color: #3c8bf6;; /* 蓝色圆点 */
+    border-radius: 50%;
+    margin-right: 15rpx;
 }
 
 .group-txt-item-text {

pages/list/list.js

@@ -0,0 +1,66 @@
+// pages/list/list.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/list/list.json

@@ -0,0 +1,7 @@
+{
+    "usingComponents": {
+      "navigation-bar": "/components/navigation-bar/navigation-bar",
+      "index-nav-bar": "/components/index-nav-bar/index-nav-bar",
+      "list-nav-bar": "/components/list-nav-bar/list-nav-bar"
+    }
+  }

pages/list/list.wxml

@@ -0,0 +1,150 @@
+<!-- <list-nav-bar title="Weixin" back="{{false}}" color="black" background="#3c8bf6"></list-nav-bar>  -->
+<!-- <navigation-bar title="Weixin" back="{{false}}" color="black" background="#3c8bf6"></navigation-bar>  -->
+
+<list-nav-bar title="WeixinWeixinWeixin" background="#3c8bf6" showNavBtn="{{true}}"></list-nav-bar>
+<scroll-view style="height: 100%;overflow:hidden;" scroll-y type="list">
+    <view class="container">
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+
+
+        <view class="card">
+            <view class="card-header">
+                <view class="dot"></view>
+                <text class="title">超出焊接时间</text>
+            </view>
+            <view class="details">
+            <!-- 查看详情 -->
+                <text class="group-item-header-tip-txt">查看详情</text>
+                <image class="details-icon" src="../../images/jt.png"></image>
+            </view>
+        </view>
+    </view>
+</scroll-view>

pages/list/list.wxss

@@ -0,0 +1,51 @@
+page {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #f3f2f4;
+    min-height: 100vh;
+}
+
+.container{
+    margin-top: 45rpx;
+    margin-left: 30rpx;
+    margin-right: 30rpx;
+}
+
+.card {
+    background-color: #ffffff;
+    border-radius: 10rpx;
+    padding: 30rpx;
+    margin-bottom: 20rpx;
+    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+}
+
+.dot {
+    width: 16rpx;
+    height: 16rpx;
+    background-color: #3c8bf6; /* 蓝色圆点 */
+    border-radius: 50%;
+    margin-right: 20rpx;
+}
+
+.title {
+    font-size: 30rpx;
+    font-weight: bold;
+}
+
+.details {
+    display: flex;
+    align-items: center;
+    color: #737373; /* 灰色文本 */
+    font-size: 24rpx;
+}
+.details-icon{
+    height: 20rpx;
+    width: 25rpx;
+}