xihuaDesign/src/views/website/home/components/Works.tsx

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

import { ArrowRightOutlined } from "@ant-design/icons-vue";
import { TabPane, Tabs } from "ant-design-vue";
import { defineComponent, reactive } from "vue";
export default defineComponent({
  setup() {
    const tabs = [
      {
        title: "产品设计",
        key: "1",
      },
      {
        title: "视觉传达",
        key: "2",
      },
      {
        title: "美术艺术",
        key: "3",
      },
      {
        title: "环境设计",
        key: "4",
      },
      {
        title: "动画",
        key: "5",
      },
    ];
    const state = reactive({
      activeKey: "1",
    });

    return () => (
      <div class={[page, "home_lay_item_box"]}>
        <div class={"global_w"}>
          <Tabs activeKey={state.activeKey} class={"talent_tab"}>
            {{
              renderTabBar: () => {
                return (
                  <div class={"ant-tabs-nav"}>
                    <div class={"home_lay_title white"}>
                      师生作品<span>/</span>
                      <span>Works</span>
                    </div>
                    <div class={"ant-tabs-nav-wrap justify-end"}>
                      <div class={"ant-tabs-nav-list"}>
                        {tabs.map((e) => {
                          return (
                            <div
                              class={`ant-tabs-tab ${
                                state.activeKey == e.key
                                  ? "ant-tabs-tab-active"
                                  : ""
                              }`}
                              key={e.key}
                            >
                              <div
                                class={"ant-tabs-tab-btn"}
                                onClick={() => {
                                  state.activeKey = e.key;
                                }}
                              >
                                {e.title}
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                );
              },
              default: () => {
                return tabs.map((item) => {
                  return (
                    <TabPane tab={item.title} key={item.key}>
                      <div class={"tab_list"}>
                        <div class={"list_item"}>
                          <a class={"item_link"}>
                            <img src={getImageUrl("temp_works_1.png")} />
                            <div class={"item_txt"}>
                              <div class={"name"}>骨科手术导航机器人</div>
                              <div class={"authors"}>作者：张小碗</div>
                            </div>
                          </a>
                        </div>
                        <div class={"list_item"}>
                          <div class={"item_lay"}>
                            <a class={"item_link"}>
                              <img src={getImageUrl("temp_works_2.png")} />
                              <div class={"item_txt"}>
                                <div class={"name"}>骨科手术导航机器人</div>
                                <div class={"authors"}>作者：张小碗</div>
                              </div>
                            </a>
                          </div>
                          <div class={"item_lay"}>
                            <a class={"item_link"}>
                              <img src={getImageUrl("temp_works_2.png")} />
                              <div class={"item_txt"}>
                                <div class={"name"}>骨科手术导航机器人</div>
                                <div class={"authors"}>作者：张小碗</div>
                              </div>
                            </a>
                          </div>
                        </div>
                        <div class={"list_item"}>
                          {" "}
                          <div class={"item_lay"}>
                            <a class={"item_link"}>
                              <img src={getImageUrl("temp_works_2.png")} />
                              <div class={"item_txt"}>
                                <div class={"name"}>骨科手术导航机器人</div>
                                <div class={"authors"}>作者：张小碗</div>
                              </div>
                            </a>
                          </div>
                          <div class={"item_lay"}>
                            <a class={"item_link"}>
                              <img src={getImageUrl("temp_works_2.png")} />
                              <div class={"item_txt"}>
                                <div class={"name"}>骨科手术导航机器人</div>
                                <div class={"authors"}>作者：张小碗</div>
                              </div>
                            </a>
                          </div>
                        </div>
                        <div class={"list_item"}>
                          <div class={"item_lay"}>
                            <a class={"item_link"}>
                              <img src={getImageUrl("temp_works_2.png")} />
                              <div class={"item_txt"}>
                                <div class={"name"}>骨科手术导航机器人</div>
                                <div class={"authors"}>作者：张小碗</div>
                              </div>
                            </a>
                          </div>
                          <div class={"item_lay"}>
                            <a class={"item_link"}>
                              <img src={getImageUrl("temp_works_2.png")} />
                              <div class={"item_txt"}>
                                <div class={"name"}>骨科手术导航机器人</div>
                                <div class={"authors"}>作者：张小碗</div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class={"list_more"}>
                        <a>
                          查看更多
                          <ArrowRightOutlined class={"arrow"} />
                        </a>
                      </div>
                    </TabPane>
                  );
                });
              },
            }}
          </Tabs>
        </div>
      </div>
    );
  },
});
const page = css`
  position: relative;
  background: url("@/assets/bg_works.png") no-repeat center top/100% auto;

  .talent_tab {
    z-index: 2;
    .ant-tabs-nav {
      margin-bottom: 40px;
      &::before {
        display: none;
      }
      .home_lay_title {
        margin-bottom: 0;
      }
    }
    .ant-tabs-tab {
      padding: 14px 0;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.8);
      & + .ant-tabs-tab {
        margin: 0 0 0 60px;
      }
      &.ant-tabs-tab-active {
        .ant-tabs-tab-btn {
          color: #fff;
        }
        &::after {
          position: absolute;
          content: "";
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 28px;
          height: 2px;
          background-color: #fff;
        }
      }
    }
    .tab_list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      .list_item {
        height: 800px;
        .item_lay {
          height: 388px;
          &:first-child {
            margin-bottom: 24px;
          }
        }
        .item_link {
          display: block;
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
          .item_txt {
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 30px 40px;
            width: 100%;
            color: #fff;
            background: linear-gradient(
              180deg,
              rgba(0, 0, 0, 0) 0%,
              #000000 100%
            );
            opacity: 0;
            overflow: hidden;
            .name {
              font-size: 20px;
              font-weight: 600;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .authors {
              margin-top: 4px;
              font-size: 14px;
              font-weight: 400;
            }
          }
          &:hover {
            img {
              transform: scale(1.2);
            }
            .item_txt {
              animation: fadeInUp 0.3s ease-in-out;
              animation-fill-mode: forwards;
            }
          }
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.3s ease-in-out;
        }
      }
    }
  }
  .list_more {
    margin-top: 35px;
    text-align: center;
    a {
      color: var(--vt-c-primary);
    }
    .arrow {
      margin-left: 8px;
      padding: 2px;
      border: 1px solid var(--vt-c-primary);
      font-size: 12px;
      border-radius: 50%;
    }
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
`;