template-demo/miniprogram_npm/@jdmini/components/jdwx-link/index.wxss

63 lines
1.8 KiB
Plaintext

/* 页面容器 */
.jdwx-link-component {
/* background-image: linear-gradient(to right, #4F9863, #4F9863); */
background-attachment: fixed;
background-size: cover; /* 确保背景图像覆盖整个元素 */
/* height: 100vh; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 20rpx;
box-sizing: border-box;
overflow: auto; /* 允许内容滚动 */
}
/* 列表项样式 */
.jdwx-applink-list {
display: flex;
align-items: center;
width: 95%;
/* 假设我们想要每个view的高度约为屏幕高度的1/8 */
/* 使用小程序的wx.getSystemInfo API动态计算并设置这个值会更准确 */
height: calc((100vh - 40rpx) / 10); /* 减去容器padding的影响 */
padding: 20rpx;
background-color: rgba(248, 250, 252, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8rpx;
margin-bottom: 10rpx;
}
.jdwx-applink-top {
display: flex;
align-items: center;
width: 95%;
/* 假设我们想要每个view的高度约为屏幕高度的1/8 */
/* 使用小程序的wx.getSystemInfo API动态计算并设置这个值会更准确 */
height: calc((100vh - 40rpx) / 6); /* 减去容器padding的影响 */
padding: 20rpx;
border-radius: 8rpx;
margin-bottom: 30rpx;
background-color: rgba(248, 250, 252, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.jdwx-applink-top-linkname{
display: flex;
font-size: 36rpx;
color: rgb(39, 37, 37);
padding-bottom: 10rpx;
}
/* 图标样式 */
.jdwx-applink-icon {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-right: 50rpx;
margin-left: 30rpx;
}
/* 文本样式 */
.jdwx-applink-text {
flex: 1;
font-size: 32rpx;
color: rgb(39, 37, 37);
}