xihuaDesign/src/views/home/components/Services.tsx

import { css } from "@linaria/core";

import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return () => (
      <div class={[page, "home_lay_item_box"]}>
        <div class={"global-w"}>
          <div class={"home_lay_title"}>
            学生服务<span>/</span>
            <span>SERVICES</span>
          </div>
          <div class={"service_list mt-40px"}>
            <div class={"ser_item"}>
              <a href="http://www.lib.xhu.edu.cn/" target="_blank">
                <div class={"ser_icon"}>
                  <img src={getImageUrl("icons/icon_home_service_1.png")} />
                </div>
                <div class={"ser_tit"}>
                  <p>图书馆</p>
                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
                </div>
              </a>
            </div>
            <div class={"ser_item"}>
              <a href="http://jwc.xhu.edu.cn/" target="_blank">
                <div class={"ser_icon"}>
                  <img src={getImageUrl("icons/icon_home_service_2.png")} />
                </div>
                <div class={"ser_tit"}>
                  <p>教育系统</p>
                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
                </div>
              </a>
            </div>
            <div class={"ser_item"}>
              <a href="http://urp.xhu.edu.cn/" target="_blank">
                <div class={"ser_icon"}>
                  <img src={getImageUrl("icons/icon_home_service_3.png")} />
                </div>
                <div class={"ser_tit"}>
                  <p>校园门户</p>
                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
                </div>
              </a>
            </div>
            <div class={"ser_item"}>
              <a href="http://eclass.xhu.edu.cn/" target="_blank">
                <div class={"ser_icon"}>
                  <img src={getImageUrl("icons/icon_home_service_4.png")} />
                </div>
                <div class={"ser_tit"}>
                  <p>西华易班</p>
                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
                </div>
              </a>
            </div>
            <div class={"ser_item"}>
              <a href="mailto:msysj@mail.xhu.edu.cn" target="_blank">
                <div class={"ser_icon"}>
                  <img src={getImageUrl("icons/icon_home_service_5.png")} />
                </div>
                <div class={"ser_tit"}>
                  <p>校长邮箱</p>
                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
                </div>
              </a>
            </div>
            <div class={"ser_item"}>
              <a href="http://oa.xhu.edu.cn/" target="_blank">
                <div class={"ser_icon"}>
                  <img src={getImageUrl("icons/icon_home_service_6.png")} />
                </div>
                <div class={"ser_tit"}>
                  <p>办公OA</p>
                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  },
});
const page = css`
  position: relative;
  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 40%;
    width: 60%;
    height: 200px;
    background-color: rgba(53, 152, 107, 0.1);
  }
  .service_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    z-index: 2;
    .ser_item {
      background-color: #fff;
      a {
        padding: 30px 50px;
        display: flex;
        align-items: center;
        color: #333;

        .ser_icon {
          padding-right: 40px;
          border-right: 1px solid #d3d9de;
          img {
            width: 108px;
            height: 108px;
            object-fit: contain;
          }
        }
        .ser_tit {
          flex: 1;
          font-size: 24px;
          padding-left: 40px;
          p {
            margin: 0;
          }
          .desc {
            margin-top: 20px;
            font-size: 16px;
            color: #999;
          }
        }
      }
    }
  }
`;