9.1.4 最新案例界面开发企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

最新推荐文章于 2023-08-15 17:38:06 发布

黄菊华老师

最新推荐文章于 2023-08-15 17:38:06 发布

阅读量559

点赞数

分类专栏： uni-app 文章标签： uni-app教程

本文链接：https://blog.csdn.net/u013818205/article/details/109611909

版权

uni-app 专栏收录该内容

122 篇文章 21 订阅

订阅专栏

9.1.4 最新案例

最新产品区块效果如图9-5。
在这里插入图片描述

布局分析

：每个产品分1行2列，左侧1列放产品图片，右侧一列放产品是文字信息；右侧的一列然后分3行放不同的产品文字信息。
注意：我们每个产品的图片image中添加属性 mode=‘widthFix’ ，表示图片高度自动随图片高度自适应按比例变化。

布局代码如下

<!--最新案例-区块标题-->
<view class='qukuai'>
  <view class='qukuai-shuxian'></view>><!--区块标题-左侧竖线-->
  <text class='qukuai-biaoti'>最新案例</text><!--区块标题-中间文字-->
  <navigator class='qukuai-gengduo' url=''>more></navigator><!--区块标题-右侧文字-->
</view>
<!--最新案例 开始-->
<navigator url='' class='anli'><!--1行2列-右列分3行-->  
  <!--1行2列：左侧1列 产品图片-->
  <image src='/static/tupian/cp03.jpg' mode='widthFix' class='anli-tupian'></image><!--产品图片-->
  <!--1行2列：右侧1列-->
  <view class='anli_jieshao'><!--右侧一列：分3行-->  
    <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
    <text class='anli_biaoti2'>类型：2020年冬装</text>
    <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
  </view>
</navigator>
<navigator url='' class='anli'><!--1行2列-右列分3行-->  
  <!--1行2列：左侧1列 产品图片-->
  <image src='/static/tupian/cp04.jpg' mode='widthFix' class='anli-tupian'></image><!--产品图片-->
  <!--1行2列：右侧1列-->
  <view class='anli_jieshao'><!--右侧一列：分3行-->  
    <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
    <text class='anli_biaoti2'>类型：2021年冬装</text>
    <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
  </view>
</navigator>
<navigator url='' class='anli'><!--1行2列-右列分3行--> 
  <!--1行2列：左侧1列 产品图片-->
  <image src='/static/tupian/cp01.jpg' mode='widthFix' class='anli-tupian'></image><!--产品图片-->
  <!--1行2列：右侧1列-->
  <view class='anli_jieshao'><!--右侧一列：分3行-->  
    <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
    <text class='anli_biaoti2'>类型：2022年冬装</text>
    <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
  </view>
</navigator>
<navigator url='' class='anli'><!--1行2列-右列分3行-->  
  <!--1行2列：左侧1列 产品图片-->
  <image src='/static/tupian/cp04.jpg' mode='widthFix' class='anli-tupian'></image><!--产品图片-->
  <!--1行2列：右侧1列-->
  <view class='anli_jieshao'><!--右侧一列：分3行-->  
    <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
    <text class='anli_biaoti2'>类型：2023年冬装</text>
    <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
  </view>
</navigator><!--最新案例 结束-->

样式代码如下：

<style>
/*最新案例（1行2列-右列分3行）*/
.anli { /*每个案例产品的整体样式*/ 
  display: flex;/*Flex布局*/
  border-bottom: 1px dotted gray;/*每个产品信息下面的下划线*/
}
.anli-tupian { /*1行2列，左侧1列图片的样式*/
  width: 80px;  /*宽度*/
  margin: 5px;  /*外边距*/
  border: 2px solid gainsboro;  /*图片的边框*/
}
.anli_jieshao {/*1行2列，右侧一列文字的样式*/
  display: flex;/*Flex布局*/
  flex-direction: column; /*改变Flex布局默认排列row为column*/
  margin-left: 3px;/*左侧外边距*/
}
.anli_biaoti1 { /*右侧第1行文字样式*/
  font-size: 16px;/*字体大小*/
}
.anli_biaoti2 { /*右侧第2行文字样式*/
  font-size: 12px; /*字体大小*/
  color: gray;     /*字体颜色*/
  margin-top: 5px;   /*顶部外边距*/
  margin-bottom: 5px;/*顶部外边距*/
}
.anli_biaoti3 { /*右侧第3行文字样式*/
  font-size: 14px;  /*字体大小*/
  color: grey;      /*字体颜色*/
}
</style>