You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
yanzong_qianduan/pages/news/article/index.vue

165 lines
3.3 KiB

11 months ago
<template>
<view class="article">
<view class="article-hd">
<view class="search">
<view class="box">
<image src="/static/news/icon-search.png"></image>
<input type="search" placeholder="商品名称/编码" />
</view>
<view class="add">
<image src="/static/news/icon-add.png"></image>新增
</view>
</view>
<u-tabs :list="list" :is-scroll="false" v-model="current" active-color="#FF2525" inactive-color="#6F6F6F" font-size="30" ></u-tabs>
</view>
<view class="article-bd">
<u-swipe-action class="b" v-for="k in 5" :key="i" @click="clickItem(11)" :options="options">
<view class="item u-border-bottom">
<view class="pic">
<image mode="aspectFill" src="@/static/home/phone.jpg" />
</view>
<!-- 此层wrap在此为必写的否则可能会出现标题定位错误 -->
<view class="info title-wrap">
<view class="title">荣耀畅玩 40 Plus 全网通5G版 绿8GB+128GB</view>
<view class="desc">
这是文章内容这是文章内容这是文章内容这是文章内容这是文章..
</view>
</view>
</view>
</u-swipe-action>
</view>
</view>
</template>
<script>
export default {
data() {
return {
options: [
{
text: '编辑',
style: {
backgroundColor: '#FF8844'
}
},
{
text: '删除',
style: {
backgroundColor: '#FF564A'
}
}
],
list: [{
name: '全部'
}, {
name: '分类1'
}, {
name: '分类2'
}, {
name: '分类3'
}, {
name: '分类4'
}, {
name: '分类5'
}, {
name: '分类6'
}],
current: 1
};
}
}
</script>
<style lang="scss">
.article{
&-bd{
.uni-movable-area{
background-color: transparent !important;
}
}
}
</style>
<style lang="scss" scoped>
.article{
&-hd{
background-color: #fff;
padding-bottom:20rpx;
.search{
width: 750rpx;
padding: 25rpx 35rpx;
border-bottom: 1px solid #F7F7F7;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.add{
font-size: 24rpx;
font-weight: 500;
color: #FF584D;
margin-left: 20rpx;
image{
width: 40rpx;
height: 40rpx;
display: block;
}
}
.box{
padding: 15rpx 25rpx;
box-sizing: border-box;
display: flex;
align-items: center;
background: #F3F3F3;
border-radius: 60rpx;
flex: 1;
image{
width: 28rpx;
height: 28rpx;
margin-right: 22rpx;
}
input{
flex: 1;
font-size: 28rpx;
line-height: 30rpx;
}
}
}
}
&-bd{
padding-bottom: 20rpx;
overflow: hidden;
.b{
margin-top: 20rpx;
}
.item{
padding: 30rpx 45rpx;
overflow: hidden;
display: flex;
align-items: center;
.pic{
width: 200rpx;
height: 160rpx;
margin-right: 20rpx;
image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
.info{
flex: 1;
max-width: 430rpx;
.title{
height: 50rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 28rpx;
font-weight: 500;
color: #3B3B3B;
}
}
}
}
}
</style>