素材

src/project/huizhili/AppCooperationPropaganda/fodderList.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="fodderList">
+    <AiTopFixed class="search-box">
+      <u-search placeholder="素材名称" v-model="keyword" :clearabled="false" :animation="false"></u-search>
+    </AiTopFixed>
+    <div class="card-box">
+      <div class="card">
+        <div class="left">
+          <!-- <div>
+            <div class="title">Q: 中卫汇通客服解决</div>
+            <div class="info">很快就都看不出可不能虚不能会计学女款你辛苦v,nvknkvnxkvnj</div>
+          </div> -->
+          <div class="files">
+            <div class="pic">
+              <img src="./images/files.png" alt="">
+            </div>
+            <div>
+              <div class="title">百度一下你就知道</div>
+              <div class="mar-top info">www.baidu.com</div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <!-- <img src="./images/xzh.png" alt=""> -->
+          <img src="./images/xz.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "fodderList",
+  data() {
+    return {
+      keyword: '',
+    }
+  },
+  methods: {
+
+  },
+  onShow() {
+
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.fodderList {
+  .card-box {
+    background: #fff;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    margin-top: 24px;
+    .card {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .left {
+        width: calc(100% - 50px);
+        height: auto;
+        background: #f2f2f2;
+        border-radius: 12px;
+        padding: 16px;
+        box-sizing: border-box;
+
+        .title {
+          font-size: 32px;
+          font-weight: 600;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .info {
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          -webkit-box-orient: vertical;
+          color: #999;
+        }
+
+        .mar-top {
+          margin-top: auto;
+        }
+        .files {
+          display: flex;
+
+          .pic {
+            width: 100px;
+            height: 100px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+      .right {
+        text-align: right;
+        width: 50px;
+        img {
+          width: 40px;
+          height: 40px;
+        }
+      }
+    }
+  }
+  
+}
+</style>