开发者学堂课程【低代码认证-第一章:项目评选系课程：1.3项目评选系统的布局设计】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/1007/detail/15055
项目评选系统的布局设计
3. 第三步：
给 swiper 的一个大小。复制以下代码：
swiper-container{
width:600px;
height:300px;
}
这里的大小要在样式当中找到源码编辑，在里面去书写第一个代码。
这里大小控制成宽度为 600PS，更改成100%。
swiper-container{
width:100%;
height:300px;
}
由于内容增加了图片，所以要给图片定义宽高，还有图片的大小。所以我们在属性当中找到 sides 下面的图片,编写代码如下：
.swiper-slide img{
width:100%;
height:300px;
background-size:100% 100%;
}
4.第四步：
初始化 swiper ：最好是挨着</body>标签
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
//如果需要分页器
pagination: ".swiper-pagination'，
/如果需要前进后退按钮
nextButton: ".swiper-button-next"，
prevButton: ".swiper-button-prev',
//如果需要滚动条
scrollbar: ".swiper-scrollbar",)
</script>
将以上代码复制，在动作面板中进行初始化，在此需要在 loadAssets() 中进行书写，如下。
export function locadAssets()｛loacScript(‘http://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js’,() ==>{
new Swiper(‘.swiper-container’,{
direction: 'vertical',
loop: true,
//如果需要分页器
pagination: ".swiper-pagination'，
/如果需要前进后退按钮
nextButton: ".swiper-button-next"，
prevButton: ".swiper-button-prev',
//如果需要滚动条
scrollbar: ".swiper-scrollbar",)
｝
书写完成后，需要在页面加载是调用方法。所以回到页面属性中去查看页面加载完成时，是否绑定了 didMount() 动作，确定绑定后保存。
保存成功后点击预览，点击新窗口打开，即可看到如图：
至此效果已展示，但需要点击才可切换到下一张图片，未达到自动轮播效果。需要配置自动展示，返回 API 文档找到一般选项中的 autoplay，在此可配置 autoplay 自动切换属性。
<script>
var mySwiper = new Swiper(".swiper-container",
iautoplay : 5000,
}
//反方向自动切换简单示例
var mySwiper = new Swiper(".swiper-container',{
loop : true,
})
setInterval("mySwiper.slldePrev()"",2000);
</script>
将其复制粘贴到页面JS的loadAssets()方法中，同时将示例的5秒改为2秒,保存，再次查看预览，就可看到自动切换效果。如果想要更改其他属性方向也可在API文档中查找配置，在动作面板中进行书写。
5.第五步：
配置查询组件，在组件库中找到查询，将其加入，配置为两列。
同时将其中的输入框去掉，剩下一个输入框，在此需要搜索项目分类和项目名称。
设置输入框名称：项目名称。在组件库添加一个下拉单选，取名为：分类。
分类需要配置其选项的显示值和选项值，此为公益项目，到此查询组件配置完成。
6.第六步：
配置项目展示布局，此时希望项目数据可自适应页面进行布局展示，适配 PC 端和移动端，接下来设置容器弹性布局样式。
在样式中选择显示为 flex 布局，方向左端，即 Direction 为 row。设置间距自适应，若一行排列不下要进行 flex-wrap 的属性，使其有换行的操作。因为设置中不含该操作，点击源码编辑，配置 flex-warp:warp，到此就可以进行换行操作了。
其中的项目数据为循环展示，因而还需要一个容器组件用作展示，再次拖动一个容器到该容器中，在此容器中展示的内容有图片、项目名称、项目描述信息和分享访问及点赞。
依次进行配置，首先图片组件，拖动图片到容器当中，在此配置图片样式为固定宽度：350，高度：255，以此解决放置上传图片格式不一致的情况，保证图片大小。
7.第七步：
配置用做展示项目名称的文本组件，现在文本组件外套一个容器组件，选择打开大纲树，拖动使得新加的容器在图片容器内。
将文本组件放置在里面，配置外层容器时，可点击属性的面包蟹导航，配置外层容器样式，内边距 padding 值 8px，高度为 31px, 以防止无数据时，进行串行操作。
复制文本容器，给其添加下边框，选择样式-》边框-》下边框-》选择为实线，宽度为1，颜色为灰色。
文本展示的内容为项目的描述信息，而描述信息可能过长，所以需在此配置文本的溢出隐藏。
点击文本-》样式-》源码编辑，在其中进行设置。首先定义宽度 width:300px, 溢出隐藏 overflow:hidden。配置的代码如下：
:root{
width:300px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
8.第八步：
再复制一个上方的文本组件，在大纲树中拖动至容器中。将其属性-》默认状态设置为隐藏，在此用于后续访问地址的拼接。
9.第九步：
配置分享访问和点赞的容器，新增三个容器，分别放置三个功能，每个容器配置一个文本和图标，在组件库中拖动容器-》大纲树中拖动至外层容器下方。在容器中添加一个文本和图标。
在其中配置分享和分享的图标，图标属性为：使用自定义图标。在基础组件-》图标中找到自定义的分享图标。
将其复制，就可以看到图标变为分享图标的样式，如下：
10. 第十步：
下面进行项目评选页面布局，初始默认显示为 block 块元素，将其更改为 felx 布局，配置主轴为水平方向，起点在左端的 Direction:row，此为分享容器，访问容器配置相同。
复制两个相同文本，更改名称为点赞和访问，更改其中点赞图标：favorite，访问图标: direction-right，最后将点赞默认设置为0。
点赞的样式布局更改为 Direction:row-reverse 主轴方向向右，之后需要在分享，访问，点赞外嵌套外层容器，去配置弹性布局，让三个小容器的间距自适应外层容器。
加入一个新容器，将分享，访问和点赞在大纲树中设置为新容器的子容器，样式中设置其为 flex 布局，间距自适应。
同时点击源码编辑，配置 line-height:17px; 配置完成后，来修饰循环的容器。配置其全部边框：实线，颜色：浅灰色，以此使项目清晰明了。
还可设置动画效果，打开区块模版-》点击内容卡片-》将区块模版复制在页面中。
打开样式，点击源码编辑，将其中的 css 样式代码复制粘贴到要修饰的容器源码中。
l 内容卡片 css 样式代码如下：
:root {
height: 100%;
background-color: #ffffff;padding:40px 24px;
border-radius: 4px;
transition: all .3s linear;
}
:root:hover{
box-shadow: 0 8px 24px 0 rgba(142,142.39)
transform: translateY(-10px);
transition: all 0.6s ease 0.2s;
}
至此容器就可以实现动画效果，主要为 transition, 更改 padding 值为 margin-top:20px 40px, 上边距为 20px, 到此实践全部配置完成，将下方样例删除。
若样式仍不美观，而在样式中找到 margin，去配置文本和图标的间距。
本章讲解到此结束，下章讲述将表单数据获取到页面展示。
