Wechat Mini Программа макет сетки - PullRequest
Новая
       10

Wechat Mini Программа макет сетки

0 голосов
/ 29 апреля 2019

Я пытался разработать мини-программу wechat, используя интерфейс из работы под названием Vant Weapp (https://youzan.github.io/vant-weapp/#/col),, однако я упал, чтобы получить макет gid, который я хотел, и не уверен, что это мой CSS илиметод макета я использую это неправильно

Ниже приведен CSS к программе 

.mainPagePicBlock{
  border-radius: 8px;
  width: 160px;
}

.mainPagePics{
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 174px;
}

.mainContentText{
  font-size: 12px;
}

.maincard{
  /* border: red solid 1px; */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 8px;
  margin-bottom: 10px;
  margin-right: 12px;
  margin-top: 10px;
  display: flex;

}

.container{
  padding: 2px;
}

.likeIcon{
  margin-left: 15px;
}

.numberOfLikes{
  margin-left: 8px;
  font-size: 12px 
}

Вот HTML 

<view>
<van-row>
<view class="container">
 <CustomNav title="Home" showProfile="{{true}}" profilePic="{{userInfo.avatarUrl}}" />
</view>
    <van-search class="search" span="24" value="{{ value }}" placeholder="search" />
    <van-tabs active="{{ active }}">
        <van-tab title="推荐"/>
        <van-tab title="附近"/>
        <van-tab title="视频"/>
        <van-tab title="旅行"/>
        <van-tab title="男士穿搭"/>
        <van-tab title="健身"/>
    </van-tabs>

<view class="container">
  <van-row gutter="8">

    <van-col span="12">
      <view>
      <Items 
          description="A picture of a beautiful scene in canada. This picture was taken by Mr David"
          likes="133" 
          mediaType="image"
          media="../../utils/image1.jpg"/>
      </view>
    </van-col>

    <van-col span="12">
      <view>
        <Items 
          description="just a sample video"
          likes="24" 
          mediaType="video"
          media="../../utils/video1.mp4" 
        />
      </view>
    </van-col>

     <van-col span="12">
      <view>
        <Items 
          description="just a sample video"
          likes="24" 
          mediaType="video"
          media="../../utils/video1.mp4" 
        />
      </view>
    </van-col>

    <van-col span="12">
      <view>
      <Items 
          description="A picture of a beautiful scene in canada. This picture was taken by Mr David"
          likes="133" 
          mediaType="image"
          media="../../utils/image1.jpg"/>
      </view>
    </van-col>


    <van-col span="12">
      <view>
        <Items 
          description="just a sample video"
          likes="24" 
          mediaType="video"
          media="../../utils/video1.mp4" 
        />
      </view>
    </van-col>

    <van-col span="12">
      <view>
      <Items 
          description="A picture of a beautiful scene in canada. This picture was taken by Mr David"
          likes="133" 
          mediaType="image"
          media="../../utils/image1.jpg"/>
      </view>
    </van-col>

      </van-row>
       </view>
    </van-row>[expected result][1]
</view>
```[Expected result[\]\[1\]][2]


  [1]: https://i.stack.imgur.com/8MvV8.jpg
  [2]: https://i.stack.imgur.com/5Ii2N.png
...