Skip to content

G
GaoQuYingJiH5-ASD
Commit 3f4f1c74 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：安全常识列表页面

parent a6712e09
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 477 deletions
src/_anquan_changshi.css
View file @ 3f4f1c74
......@@ -139,8 +139,6 @@ body {
}
.van-field__label {
font-weight: bold;
}
......@@ -149,59 +147,96 @@ body {
color: #737373;
}
.subNavWrapper {
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
margin-top: -0.3rem;
}
.subNavWrapper .van-tab__text {
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
}
.subNavWrapper .van-tab--active span {
color: #fff;
font-size: 0.28rem;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.subNavWrapper .van-tabs__nav--card {
border: none !important;
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.subNavWrapper .van-tabs--card {
margin-bottom: 0.3rem;
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
justify-content: center;
gap: .2rem;
/* 卡片间距 */
box-sizing: border-box;
padding-bottom: .2rem;
/* padding: 10px;
*/
}
.subNavWrapper .van-tabs__nav--card .van-tab {
color: #5B5B5B;
border: none !important;
.card {
/* flex: 0 0 calc(50% - 5px); */
flex: 0 0 46%;
/* 每行两个卡片，减去间距的一半 */
background: white;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active {
color: #FFFFFF;
background: #58A5E8;
border-radius: 0.4rem;
.card:hover {
transform: translateY(-5px);
}
.subNavWrapper .van-list {
background: #F5F6FA;
.image-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 比例 */
overflow: hidden;
}
.subNavWrapper .van-cell {
margin-bottom: .3rem;
}
.subNavWrapper .van-tabs__nav {
background: #F5F6FA;
margin: 0;
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
.image-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
color: white;
font-size: 14px;
}
.card-title {
padding: 15px;
font-size: .28rem;
font-weight: bold;
color: #333;
line-height: 1.4;
/* 新增多行溢出省略样式 */
overflow: hidden; /* 隐藏溢出内容 */
display: -webkit-box; /* 弹性盒模型 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 2; /* 限制2行 */
max-height: calc(0.28rem * 1.4 * 2 + 30px); /* 2行高度 + 上下padding（15px*2） */
}
\ No newline at end of file
src/_anquan_changshi.html
View file @ 3f4f1c74
......@@ -7,95 +7,13 @@
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
justify-content: center;
gap: .2rem;
/* 卡片间距 */
box-sizing: border-box;
padding-bottom: .2rem;
/* padding: 10px;
*/
}
.card {
/* flex: 0 0 calc(50% - 5px); */
flex: 0 0 46%;
/* 每行两个卡片，减去间距的一半 */
background: white;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.image-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 比例 */
overflow: hidden;
}
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
color: white;
font-size: 14px;
}
.card-title {
padding: 15px;
font-size: .28rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
</style>
</head>
</head>
<body>
<div id="app">
<div class="wrapper" v-cloak>
<div class="header">
<van-search v-model="merName" show-action placeholder="请输入商家关键词" @search="onSearch">
<van-search v-model="merName" show-action placeholder="请输入安全常识名称" @search="onSearch">
<template #action>
<div @click="onSearch"></div>
</template>
......@@ -103,49 +21,25 @@
</div>
<!-- Tab栏 -->
<van-tabs v-model:active="activeTab" @click="clickTab" title-active-color="#1989fa" line-height="2px"
<van-tabs v-model:active="activeTab" @change="tabChange" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;">
<van-tab title="常识视频"></van-tab>
<van-tab title="警示视频"></van-tab>
<van-tab title="应知应会"></van-tab>
<!-- <van-tab title="培训演练"></van-tab> -->
</van-tabs>
<!-- 隐患列表 -->
<van-list>
<div class="container">
<div class="card" v-for="item in 11">
<div class="image-wrapper">
<img src="https://dummyimage.com/340x206" alt="视频封面1">
<!-- 隐患列表 -->
<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
<div class="container">
<div class="card" v-for="item in 11">
<div class="image-wrapper">
<img src="https://dummyimage.com/340x206" alt="视频封面1">
</div>
<div class="card-title">这是第一个视频标题，展示基本样式效果</div>
</div>
<div class="card-title">这是第一个视频标题，展示基本，烧烤料上岛咖啡就水电费收快递费就</div>
</div>
</van-list>
<!-- <van-list>
<van-cell v-for="item in 11"
style="position: relative;margin-bottom: 0.25rem;margin-top: 0.25rem;" @click="viewDetail(item)">
<div style="width: 100%;">
<div style="
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 0.3rem;
font-weight: bold;
font-family: PingFang SC;
">隐患排查不松懈</div>
<div style="position: relative: flex; justify-content: space-between; margin: 8px 0;">
<span
style="color: #737373; font-size: 0.28rem;">{{ '2025/2/12' }}</span>
<van-icon name="arrow" style="position: absolute; right:0;top:.5rem;font-size:.4rem;" @click="viewDetail(item,'YH_XQ')" />
</div>
</div>
</van-cell>
</van-list> -->
</div>
</van-list>
</div>
</body>
......
src/_anquan_changshi.js
View file @ 3f4f1c74
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment